/**
 * Moqatel OS — Official Design System & Strict Token Architecture
 * Brand Logo Derivation: Near-black tile (#0B0D10) + Bronze frame (#6B5A3A)
 * Four Vertical Rounded Bars: Red (#D93A32), Cream (#FFFFFF -> #D9CDB5), Charcoal (#2A2C33), Green (#138A5E)
 * Primary Accent: Metallic Gold letter "Y" (#D4AF5F)
 * STRICT RULE: ZERO off-palette colors. No blue, purple, orange, teal, pink, pure black or random greys.
 */

:root {
  /* ==========================================================================
     1. Brand Design Tokens (Dark Mode Default)
     ========================================================================== */
  
  /* Backgrounds & Surfaces (from the logo tile) */
  --mq-bg-base: #0B0D10;
  --mq-surface-1: #12151A;
  --mq-surface-2: #181C22;
  --mq-surface-3: #1F232A;
  --mq-charcoal: #2A2C33;
  --mq-charcoal-gradient: linear-gradient(180deg, #2A2C33 0%, #15171A 100%);
  --mq-border-subtle: #262A31;
  --mq-border-strong: #6B5A3A;
  --mq-frame-bronze: #6B5A3A;

  /* Gold (primary brand, from the "Y") */
  --mq-gold-100: #F6EBC4;
  --mq-gold-200: #F2E3B0;
  --mq-gold-300: #E3C97E;
  --mq-gold-400: #D4AF5F; /* PRIMARY */
  --mq-gold-500: #C9A24E;
  --mq-gold-600: #B38A3C;
  --mq-gold-700: #8F6C2D;
  --mq-gold-gradient: linear-gradient(135deg, #F2E3B0 0%, #D4AF5F 48%, #B8903F 100%);
  --mq-gold-tint: rgba(212, 175, 95, 0.14);
  --mq-gold-glow: rgba(212, 175, 95, 0.28);
  --mq-selection: rgba(212, 175, 95, 0.16);

  /* Cream / White (from the white bar) */
  --mq-text-primary: #F4EEDD;
  --mq-white-pure: #FFFFFF;
  --mq-text-secondary: #B8B0A0;
  --mq-text-muted: #7C7A74;
  --mq-cream-bar: linear-gradient(180deg, #FFFFFF 0%, #D9CDB5 100%);
  --mq-cream-tint: rgba(244, 238, 221, 0.08);

  /* Red (from the red bar) -> danger / lost / overdue */
  --mq-red-400: #E0403A;
  --mq-red-500: #D93A32;
  --mq-red-700: #A21E22;
  --mq-red-tint: rgba(217, 58, 50, 0.14);

  /* Green (from the green bar) -> success / paid / eligible */
  --mq-green-300: #3DBB8C;
  --mq-green-500: #138A5E;
  --mq-green-700: #0B5A3E;
  --mq-green-tint: rgba(19, 138, 94, 0.16);

  /* Semantic Aliases */
  --mq-primary: var(--mq-gold-400);
  --mq-primary-hover: var(--mq-gold-500);
  --mq-primary-dim: var(--mq-gold-tint);
  --mq-primary-glow: var(--mq-gold-glow);
  --mq-success: var(--mq-green-500);
  --mq-success-tint: var(--mq-green-tint);
  --mq-danger: var(--mq-red-500);
  --mq-danger-tint: var(--mq-red-tint);
  --mq-warning: var(--mq-gold-300);
  --mq-warning-tint: var(--mq-gold-tint);
  --mq-info: var(--mq-text-primary);
  --mq-info-tint: var(--mq-cream-tint);

  /* Universal Canonical Surfaces mapped to Dark Default */
  --mq-bg: var(--mq-bg-base);
  --mq-surface: var(--mq-surface-1);
  --mq-border: var(--mq-border-subtle);
  --mq-text: var(--mq-text-primary);

  /* Geometry & Radii */
  --mq-r-card: 20px;
  --mq-r-modal: 24px;
  --mq-r-btn: 12px;
  --mq-r-input: 12px;
  --mq-r-pill: 9999px;

  /* Typography */
  --font-ar: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', sans-serif;
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Legacy aliases for seamless compatibility */
  --stitch-primary: var(--mq-gold-400);
  --stitch-secondary: var(--mq-gold-600);
  --g-primary: var(--mq-gold-400);
  --g-accent: var(--mq-red-500);
  --tcms-primary: var(--mq-gold-400);
  --tcms-accent: var(--mq-red-500);
}

/* ==========================================================================
   2. Light Theme Overrides (Optional toggle derived strictly from palette)
   ========================================================================== */
html:not(.dark),
[data-theme="light"],
.theme-light {
  --mq-bg-base: #F7F3E8;
  --mq-surface-1: #FFFFFF;
  --mq-surface-2: #EFE9D9;
  --mq-surface-3: #E4DEC8;
  --mq-charcoal: #2A2C33;
  --mq-border-subtle: #E0D8C4;
  --mq-border-strong: #6B5A3A;

  --mq-text-primary: #15171A;
  --mq-text-secondary: #6E6A60;
  --mq-text-muted: #8A857B;

  --mq-primary: #B38A3C; /* Darker gold-600 for high-contrast on light background */
  --mq-primary-hover: #8F6C2D;
  --mq-primary-dim: rgba(179, 138, 60, 0.12);
  --mq-primary-glow: rgba(179, 138, 60, 0.22);

  --mq-bg: var(--mq-bg-base);
  --mq-surface: var(--mq-surface-1);
  --mq-border: var(--mq-border-subtle);
  --mq-text: var(--mq-text-primary);
}

/* Dark mode explicit match */
html.dark,
[data-theme="dark"],
.dark {
  --mq-bg: #0B0D10;
  --mq-surface: #12151A;
  --mq-surface-2: #181C22;
  --mq-surface-3: #1F232A;
  --mq-border: #262A31;
  --mq-border-strong: #6B5A3A;
  --mq-text: #F4EEDD;
  --mq-text-muted: #7C7A74;
}

/* ==========================================================================
   3. Base Reset & Typography
   ========================================================================== */
body {
  background-color: var(--mq-bg-base) !important;
  color: var(--mq-text-primary);
  font-family: var(--font-en);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[lang="ar"] body,
[dir="rtl"] body {
  font-family: var(--font-ar);
}

/* Page titles in text-primary with thin gold underline accent */
.mq-page-title {
  color: var(--mq-text-primary);
  font-weight: 700;
  font-size: 24px;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.mq-page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 44px;
  height: 2px;
  background: var(--mq-gold-400);
  border-radius: 2px;
}
[dir="rtl"] .mq-page-title::after {
  left: auto;
  right: 0;
}

/* ==========================================================================
   4. The Four Bars Brand Motif
   ========================================================================== */
.mq-four-bars {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
}
.mq-four-bars .bar {
  display: inline-block;
  border-radius: 9999px;
  width: 4px;
  height: 18px;
}
.mq-four-bars .bar-red {
  background: var(--mq-red-500);
}
.mq-four-bars .bar-cream {
  background: var(--mq-cream-bar);
}
.mq-four-bars .bar-charcoal {
  background: var(--mq-charcoal-gradient);
}
.mq-four-bars .bar-green {
  background: var(--mq-green-500);
}

/* Sizes */
.mq-four-bars.sm .bar { width: 3px; height: 12px; }
.mq-four-bars.md .bar { width: 4px; height: 18px; }
.mq-four-bars.lg .bar { width: 6px; height: 26px; }

/* Animated sequence (for loading indicators & loaders) */
.mq-four-bars.animating .bar {
  animation: mqBarPulse 1.2s ease-in-out infinite;
}
.mq-four-bars.animating .bar-red { animation-delay: 0.0s; }
.mq-four-bars.animating .bar-cream { animation-delay: 0.15s; }
.mq-four-bars.animating .bar-charcoal { animation-delay: 0.3s; }
.mq-four-bars.animating .bar-green { animation-delay: 0.45s; }

@keyframes mqBarPulse {
  0%, 100% {
    transform: scaleY(0.4);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1.15);
    opacity: 1;
  }
}

/* The Brand Logo Tile Motif */
.mq-logo-tile {
  width: 42px;
  height: 42px;
  background: var(--mq-bg-base);
  border: 1px solid var(--mq-frame-bronze);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.mq-logo-tile::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mq-gold-300), transparent);
}

/* ==========================================================================
   5. Buttons (Section 8)
   ========================================================================== */
.mq-btn {
  height: 44px;
  padding: 0 18px;
  border-radius: var(--mq-r-btn);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 180ms ease-out;
  cursor: pointer;
  border: none;
  outline: none;
  user-select: none;
}
.mq-btn:focus-visible {
  outline: 2px solid var(--mq-gold-400);
  outline-offset: 3px;
}

/* Primary Button: Gold gradient + Obsidian text */
.mq-btn-primary {
  background: var(--mq-gold-gradient);
  color: #0B0D10 !important;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(212, 175, 95, 0.25);
}
.mq-btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 175, 95, 0.35);
}
.mq-btn-primary:active {
  transform: translateY(0);
}

/* Secondary Button: Surface-3 + Bronze border + Cream text */
.mq-btn-secondary {
  background: var(--mq-surface-3);
  border: 1px solid var(--mq-frame-bronze);
  color: var(--mq-text-primary);
}
.mq-btn-secondary:hover {
  background: var(--mq-charcoal);
  border-color: var(--mq-gold-400);
  color: var(--mq-gold-200);
}

/* Ghost Button */
.mq-btn-ghost {
  background: transparent;
  color: var(--mq-text-primary);
}
.mq-btn-ghost:hover {
  background: var(--mq-gold-tint);
  color: var(--mq-gold-300);
}

/* Danger Button: Red */
.mq-btn-danger {
  background: var(--mq-red-500);
  color: #FFFFFF;
}
.mq-btn-danger:hover {
  background: var(--mq-red-400);
  box-shadow: 0 4px 14px rgba(217, 58, 50, 0.3);
}

/* Success Button: Green */
.mq-btn-success {
  background: var(--mq-green-500);
  color: #FFFFFF;
}
.mq-btn-success:hover {
  background: var(--mq-green-300);
  box-shadow: 0 4px 14px rgba(19, 138, 94, 0.3);
}

/* ==========================================================================
   6. Cards & Containers (Section 6)
   ========================================================================== */
.mq-card {
  background: var(--mq-surface-1);
  border: 1px solid var(--mq-border-subtle);
  border-radius: var(--mq-r-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.mq-card-hero {
  border: 1px solid var(--mq-frame-bronze) !important;
  box-shadow: 0 0 0 1px var(--mq-frame-bronze), 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

/* Card Header */
.mq-card-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--mq-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Card Body */
.mq-card-body {
  padding: 24px;
}

/* KPI Numbers in gold-gradient text or cream */
.mq-kpi-val {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  background: var(--mq-gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mq-kpi-val-cream {
  color: var(--mq-text-primary);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  font-feature-settings: "tnum";
}

/* KPI Icon in gold circle */
.mq-kpi-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background: var(--mq-gold-tint);
  border: 1px solid rgba(212, 175, 95, 0.3);
  color: var(--mq-gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

/* Delta indicators */
.mq-delta-pos {
  color: var(--mq-green-300);
  background: var(--mq-green-tint);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.mq-delta-neg {
  color: var(--mq-red-400);
  background: var(--mq-red-tint);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
   7. Form Inputs & Selects (Section 8)
   ========================================================================== */
.mq-input,
.mq-select {
  height: 44px;
  background: var(--mq-surface-3);
  border: 1px solid var(--mq-border-subtle);
  border-radius: var(--mq-r-input);
  color: var(--mq-text-primary);
  padding: 0 14px;
  font-size: 14px;
  width: 100%;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  outline: none;
}
.mq-input:focus,
.mq-select:focus {
  border-color: var(--mq-gold-400);
  box-shadow: 0 0 0 2px rgba(212, 175, 95, 0.25);
}
.mq-input::placeholder {
  color: var(--mq-text-muted);
}
.mq-input.is-error {
  border-color: var(--mq-red-500);
}
.mq-helper-error {
  color: var(--mq-red-400);
  font-size: 12px;
  margin-top: 4px;
}

/* ==========================================================================
   8. Badges, Entitlement & SLA (Section 2, 3, 11)
   ========================================================================== */
.mq-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.mq-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
}

/* Success: Green */
.mq-badge-success {
  background: var(--mq-green-tint);
  color: var(--mq-green-300);
  border: 1px solid rgba(19, 138, 94, 0.3);
}
.mq-badge-success .dot { background: var(--mq-green-500); }

/* Danger: Red */
.mq-badge-danger {
  background: var(--mq-red-tint);
  color: var(--mq-red-400);
  border: 1px solid rgba(217, 58, 50, 0.3);
}
.mq-badge-danger .dot { background: var(--mq-red-500); }

/* Warning / Pending: Gold */
.mq-badge-warning {
  background: var(--mq-gold-tint);
  color: var(--mq-gold-300);
  border: 1px solid rgba(212, 175, 95, 0.3);
}
.mq-badge-warning .dot { background: var(--mq-gold-400); }

/* Neutral / Info: Cream on Charcoal */
.mq-badge-neutral {
  background: var(--mq-cream-tint);
  color: var(--mq-text-primary);
  border: 1px solid var(--mq-border-subtle);
}
.mq-badge-neutral .dot { background: var(--mq-text-muted); }

/* Suspended: Charcoal with Red Border */
.mq-badge-suspended {
  background: var(--mq-charcoal);
  color: var(--mq-text-primary);
  border: 1px solid var(--mq-red-500);
}
.mq-badge-suspended .dot { background: var(--mq-red-500); }

/* SLA Chips */
.mq-sla-on-track {
  background: var(--mq-green-tint);
  color: var(--mq-green-300);
  border: 1px solid var(--mq-green-500);
}
.mq-sla-due-soon {
  background: var(--mq-gold-tint);
  color: var(--mq-gold-300);
  border: 1px solid var(--mq-gold-400);
}
.mq-sla-breached {
  background: var(--mq-red-tint);
  color: var(--mq-red-400);
  border: 1px solid var(--mq-red-500);
  animation: mqPulseBreach 1.8s infinite ease-in-out;
}
@keyframes mqPulseBreach {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 58, 50, 0.4); }
  50% { box-shadow: 0 0 0 4px rgba(217, 58, 50, 0.15); }
}

/* Lead Score Ring */
.mq-score-ring {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  border: 2px solid var(--mq-gold-400);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--mq-gold-300);
  background: var(--mq-surface-2);
}

/* ==========================================================================
   9. Tables (Section 8)
   ========================================================================== */
.mq-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.mq-table th {
  background: var(--mq-surface-2);
  color: var(--mq-text-muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mq-border-subtle);
  position: sticky;
  top: 0;
  z-index: 5;
}
.mq-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--mq-border-subtle);
  color: var(--mq-text-primary);
  font-size: 14px;
}
.mq-table tr:hover td {
  background: var(--mq-surface-3);
}
.mq-table-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
[dir="rtl"] .mq-table-num {
  text-align: left;
}

/* ==========================================================================
   10. Lead Pipeline Stages (Section 3)
   ========================================================================== */
.mq-pipe-new { background: var(--mq-cream-tint); color: var(--mq-text-primary); border-color: var(--mq-border-subtle); }
.mq-pipe-assigned { background: var(--mq-surface-3); color: var(--mq-text-secondary); border-color: var(--mq-charcoal); }
.mq-pipe-first-contact { background: rgba(179, 138, 60, 0.14); color: var(--mq-gold-600); border-color: var(--mq-gold-600); }
.mq-pipe-contacted { background: rgba(201, 162, 78, 0.14); color: var(--mq-gold-500); border-color: var(--mq-gold-500); }
.mq-pipe-qualified { background: rgba(212, 175, 95, 0.16); color: var(--mq-gold-400); border-color: var(--mq-gold-400); }
.mq-pipe-interested { background: rgba(227, 201, 126, 0.16); color: var(--mq-gold-300); border-color: var(--mq-gold-300); }
.mq-pipe-booking { background: rgba(242, 227, 176, 0.16); color: var(--mq-gold-200); border-color: var(--mq-gold-200); }
.mq-pipe-pending { background: var(--mq-gold-tint); color: var(--mq-gold-300); border: 1.5px dashed var(--mq-gold-400); }
.mq-pipe-paid { background: var(--mq-green-tint); color: var(--mq-green-500); border-color: var(--mq-green-500); }
.mq-pipe-converted { background: rgba(11, 90, 62, 0.25); color: var(--mq-green-300); border-color: var(--mq-green-700); }
.mq-pipe-lost { background: var(--mq-red-tint); color: var(--mq-red-400); border-color: var(--mq-red-500); }

/* ==========================================================================
   11. Data Visualization & Charts Tokens (Section 4)
   ========================================================================== */
:root {
  --chart-series-1: #D4AF5F; /* gold-400 */
  --chart-series-2: #138A5E; /* green-500 */
  --chart-series-3: #D9CDB5; /* cream */
  --chart-series-4: #D93A32; /* red-500 */
  --chart-series-5: #4A4D55; /* charcoal-light */
  --chart-series-6: #8F6C2D; /* gold-700 */
  --chart-gridline: #262A31;
  --chart-axis-text: #7C7A74;
}

/* ==========================================================================
   12. Filament Core Layout & Sidebar Deep Overrides (STRICT OBSIDIAN/GOLD)
   ========================================================================== */
/* --- SIDEBAR FOUNDATIONS (DARK & LIGHT MODE) --- */
.fi-sidebar,
aside.fi-sidebar {
  background: #FFFFFF !important;
  border-inline-end: 1px solid #D9CDB5 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-sidebar-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D9CDB5 !important;
}

.fi-sidebar-nav {
  background: transparent !important;
}

.fi-sidebar-footer {
  background: #FFFFFF !important;
  border-top: 1px solid #D9CDB5 !important;
}

.fi-sidebar-group-label,
.fi-sidebar-group-label span,
.fi-sidebar-group-button {
  color: #7A6538 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

.dark .fi-sidebar,
.dark aside.fi-sidebar {
  background: #0B0D10 !important;
  border-inline-end: 1px solid rgba(107, 90, 58, 0.28) !important;
  box-shadow: 4px 0 35px rgba(0, 0, 0, 0.65) !important;
}

.dark .fi-sidebar-header {
  background: #0B0D10 !important;
  border-bottom: 1px solid rgba(107, 90, 58, 0.25) !important;
}

.dark .fi-sidebar-nav {
  background: transparent !important;
}

.dark .fi-sidebar-footer {
  background: #0B0D10 !important;
  border-top: 1px solid rgba(107, 90, 58, 0.25) !important;
}

.dark .fi-sidebar-group-label,
.dark .fi-sidebar-group-label span,
.dark .fi-sidebar-group-button {
  color: #B8B0A0 !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}

.fi-topbar {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D9CDB5 !important;
}

.dark .fi-topbar {
  background: #0B0D10 !important;
  border-bottom: 1px solid rgba(107, 90, 58, 0.28) !important;
}

/* Inactive Sidebar Navigation Item Hover */
.fi-sidebar-item-btn {
  border-radius: 12px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-sidebar-item-btn:hover:not([aria-current="page"]) {
  background: rgba(212, 175, 95, 0.12) !important;
  color: #15171A !important;
}

.dark .fi-sidebar-item-btn {
  color: #F4EEDD !important;
}

.dark .fi-sidebar-item-btn .fi-sidebar-item-icon,
.dark .fi-sidebar-item-btn svg,
.dark .fi-sidebar-item-btn i {
  color: #D4AF5F !important;
}

.dark .fi-sidebar-item-btn:hover:not([aria-current="page"]) {
  background: rgba(212, 175, 95, 0.14) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(107, 90, 58, 0.45) !important;
}

.dark .fi-sidebar-item-btn:hover:not([aria-current="page"]) .fi-sidebar-item-icon,
.dark .fi-sidebar-item-btn:hover:not([aria-current="page"]) svg {
  color: #F2E3B0 !important;
}

/* Active navigation item: Full Signature Gold Gradient Pill ONLY for Top-Level Active Item (Scoped with >) */
.fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-nav > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn,
.fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn,
.fi-sidebar-group-items > .fi-sidebar-item.fi-active > a,
.fi-sidebar-group-items > .fi-sidebar-item.fi-active > button,
.fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"],
.dark .fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-nav > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-group-items > .fi-sidebar-item.fi-active > a,
.dark .fi-sidebar-group-items > .fi-sidebar-item.fi-active > button,
.dark .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"] {
  background: linear-gradient(135deg, #F2E3B0 0%, #D4AF5F 50%, #B8903F 100%) !important;
  color: #0B0D10 !important;
  font-weight: 800 !important;
  border: 1px solid #6B5A3A !important;
  border-inline-start: 1px solid #6B5A3A !important;
  box-shadow: 0 4px 16px rgba(212, 175, 95, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  border-radius: 12px !important;
  position: relative !important;
}

/* Red Indicator Pillar ONLY for Top-Level Active Item (Scoped with >) */
.fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
.fi-sidebar-nav > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn::before,
.fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
.fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn::before,
.fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"]::before,
.dark .fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
.dark .fi-sidebar-nav > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn::before,
.dark .fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
.dark .fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn::before,
.dark .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"]::before {
  content: '' !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  top: 15% !important;
  bottom: 15% !important;
  width: 4px !important;
  border-radius: 0 4px 4px 0 !important;
  background: #D93A32 !important;
  box-shadow: 0 0 10px #D93A32, 0 0 4px #D93A32 !important;
}

[dir="rtl"] .fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
[dir="rtl"] .fi-sidebar-nav > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn::before,
[dir="rtl"] .fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
[dir="rtl"] .fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn::before,
[dir="rtl"] .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"]::before,
[dir="rtl"] .dark .fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
[dir="rtl"] .dark .fi-sidebar-nav > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn::before,
[dir="rtl"] .dark .fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before,
[dir="rtl"] .dark .fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn::before,
[dir="rtl"] .dark .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"]::before {
  border-radius: 4px 0 0 4px !important;
}

/* Ensure Direct Children in Top-Level Active Navigation Items are Crisp Obsidian Black */
.fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > *,
.fi-sidebar-nav > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn > *,
.fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > *,
.fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn > *,
.fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"] > *,
.dark .fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > *,
.dark .fi-sidebar-nav > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn > *,
.dark .fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > *,
.dark .fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn > *,
.dark .fi-sidebar-group-items > .fi-sidebar-item > .fi-sidebar-item-btn[aria-current="page"] > * {
  color: #0B0D10 !important;
  -webkit-text-fill-color: #0B0D10 !important;
  fill: #0B0D10 !important;
  font-weight: 800 !important;
}

/* --- SUB-ITEMS EXPLICIT ISOLATION & RESET (NEVER CASCADE GOLD GRADIENT) --- */
.fi-sidebar-sub-group-items .fi-sidebar-item-btn,
.fi-sidebar-sub-items .fi-sidebar-item-btn,
.fi-sidebar-item-sub-items .fi-sidebar-item-btn,
.fi-sidebar-item ul .fi-sidebar-item-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  min-height: 32px !important;
  padding: 5px 10px !important;
  transform: none !important;
}

.fi-sidebar-sub-group-items .fi-sidebar-item-btn::before,
.fi-sidebar-sub-items .fi-sidebar-item-btn::before,
.fi-sidebar-item-sub-items .fi-sidebar-item-btn::before,
.fi-sidebar-item ul .fi-sidebar-item-btn::before {
  display: none !important;
}

/* Inactive Sub-Item Text & Icons (Dark Mode) */
.dark .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-sidebar-item-label,
.dark .fi-sidebar-sub-items .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-sidebar-item-label,
.dark .fi-sidebar-item-sub-items .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-sidebar-item-label,
.dark .fi-sidebar-item ul .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-sidebar-item-label {
  color: #CBD5E1 !important;
  -webkit-text-fill-color: #CBD5E1 !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.dark .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.dark .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn svg,
.dark .fi-sidebar-sub-group-items .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn i,
.dark .fi-sidebar-sub-items .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn svg,
.dark .fi-sidebar-item ul .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn svg {
  color: #A8A090 !important;
  -webkit-text-fill-color: #A8A090 !important;
  fill: currentColor !important;
}

/* Sub-Item Hover (Dark Mode) */
.dark .fi-sidebar-sub-group-items .fi-sidebar-item-btn:hover,
.dark .fi-sidebar-sub-items .fi-sidebar-item-btn:hover,
.dark .fi-sidebar-item-sub-items .fi-sidebar-item-btn:hover,
.dark .fi-sidebar-item ul .fi-sidebar-item-btn:hover {
  background: rgba(212, 175, 95, 0.08) !important;
  border-color: rgba(212, 175, 95, 0.22) !important;
  color: #FFFFFF !important;
}

.dark .fi-sidebar-sub-group-items .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.dark .fi-sidebar-sub-items .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.dark .fi-sidebar-item ul .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.dark .fi-sidebar-sub-group-items .fi-sidebar-item-btn:hover .fi-sidebar-item-icon,
.dark .fi-sidebar-sub-group-items .fi-sidebar-item-btn:hover svg,
.dark .fi-sidebar-sub-items .fi-sidebar-item-btn:hover svg {
  color: #D4AF5F !important;
  -webkit-text-fill-color: #D4AF5F !important;
}

/* ACTIVE Sub-Item ONLY (Refined Gold Frame & Tint, NOT a shouting gradient) */
.fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-sub-group-items .fi-sidebar-item-btn[aria-current="page"],
.fi-sidebar-sub-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-sub-items .fi-sidebar-item-btn[aria-current="page"],
.fi-sidebar-item ul .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.fi-sidebar-item ul .fi-sidebar-item-btn[aria-current="page"] {
  background: rgba(212, 175, 95, 0.14) !important;
  color: #7A6538 !important;
  border: 1px solid rgba(212, 175, 95, 0.4) !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.dark .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-sub-group-items .fi-sidebar-item-btn[aria-current="page"],
.dark .fi-sidebar-sub-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-sub-items .fi-sidebar-item-btn[aria-current="page"],
.dark .fi-sidebar-item ul .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
.dark .fi-sidebar-item ul .fi-sidebar-item-btn[aria-current="page"] {
  background: rgba(212, 175, 95, 0.16) !important;
  color: #D4AF5F !important;
  border: 1px solid rgba(212, 175, 95, 0.45) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.dark .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.dark .fi-sidebar-sub-group-items .fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-label,
.dark .fi-sidebar-sub-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.dark .fi-sidebar-sub-items .fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-label,
.dark .fi-sidebar-item ul .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.dark .fi-sidebar-item ul .fi-sidebar-item-btn[aria-current="page"] .fi-sidebar-item-label {
  color: #D4AF5F !important;
  -webkit-text-fill-color: #D4AF5F !important;
  font-weight: 700 !important;
}

.dark .fi-sidebar-sub-group-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.dark .fi-sidebar-sub-group-items .fi-sidebar-item-btn[aria-current="page"] svg,
.dark .fi-sidebar-sub-items .fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.dark .fi-sidebar-sub-items .fi-sidebar-item-btn[aria-current="page"] svg,
.dark .fi-sidebar-item ul .fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg,
.dark .fi-sidebar-item ul .fi-sidebar-item-btn[aria-current="page"] svg {
  color: #D4AF5F !important;
  -webkit-text-fill-color: #D4AF5F !important;
}

/* Refined Sub-Item Count Badges (Eliminate Rainbow Noise) */
.dark .fi-sidebar-sub-group-items .fi-sidebar-item-badge-ctn,
.dark .fi-sidebar-sub-items .fi-sidebar-item-badge-ctn,
.dark .fi-sidebar-item-sub-items .fi-sidebar-item-badge-ctn,
.dark .fi-sidebar-item ul .fi-sidebar-item-badge-ctn {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #94A3B8 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 1px 7px !important;
  opacity: 0.65 !important;
}

/* Sidebar Group Collapse Button Strict Obsidian Styling */
.fi-sidebar-group-collapse-btn,
.dark .fi-sidebar-group-collapse-btn,
.fi-icon-btn.fi-sidebar-group-collapse-btn,
.dark .fi-icon-btn.fi-sidebar-group-collapse-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  width: 28px !important;
  height: 28px !important;
}

.dark .fi-sidebar-group-collapse-btn svg,
.dark .fi-icon-btn.fi-sidebar-group-collapse-btn svg {
  color: #94A3B8 !important;
}

.dark .fi-sidebar-group-collapse-btn:hover,
.dark .fi-icon-btn.fi-sidebar-group-collapse-btn:hover {
  background: rgba(212, 175, 95, 0.12) !important;
}

.dark .fi-sidebar-group-collapse-btn:hover svg,
.dark .fi-icon-btn.fi-sidebar-group-collapse-btn:hover svg {
  color: #D4AF5F !important;
}

/* Filament standard buttons */
.fi-btn-primary {
  background: var(--mq-gold-gradient) !important;
  color: #0B0D10 !important;
  border: none !important;
  font-weight: 700 !important;
}
.fi-btn-primary:hover {
  filter: brightness(1.08) !important;
}

/* Selection background */
::selection {
  background: var(--mq-selection);
  color: var(--mq-gold-100);
}

/* ==========================================================================
   13. Responsive Studio Workbench Classes (Dual Dark/Light Mode)
   ========================================================================== */
.mq-studio-bg {
  background-color: var(--mq-bg-base) !important;
  color: var(--mq-text-primary) !important;
}

.mq-studio-card {
  background-color: var(--mq-surface-1) !important;
  border: 1px solid var(--mq-border-subtle) !important;
  color: var(--mq-text-primary) !important;
  border-radius: var(--mq-r-card) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  transition: all 180ms ease;
}

.mq-studio-card-hero {
  background-color: var(--mq-surface-1) !important;
  border: 1.5px solid var(--mq-frame-bronze) !important;
  color: var(--mq-text-primary) !important;
  border-radius: var(--mq-r-card) !important;
  box-shadow: 0 0 0 1px var(--mq-frame-bronze), 0 8px 28px rgba(0, 0, 0, 0.45) !important;
}

.mq-studio-subcard {
  background-color: var(--mq-surface-2) !important;
  border: 1px solid var(--mq-border-subtle) !important;
  color: var(--mq-text-primary) !important;
  border-radius: 14px !important;
}

.mq-studio-input {
  background-color: var(--mq-surface-3) !important;
  border: 1px solid var(--mq-border-subtle) !important;
  color: var(--mq-text-primary) !important;
  border-radius: var(--mq-r-input) !important;
  outline: none !important;
}
.mq-studio-input:focus {
  border-color: var(--mq-primary) !important;
  box-shadow: 0 0 0 2px var(--mq-gold-tint) !important;
}

.mq-studio-border {
  border-color: var(--mq-border-subtle) !important;
}

.mq-studio-text {
  color: var(--mq-text-primary) !important;
}

.mq-studio-text-sec {
  color: var(--mq-text-secondary) !important;
}

.mq-studio-text-muted {
  color: var(--mq-text-muted) !important;
}

.mq-studio-text-gold {
  color: var(--mq-primary) !important;
}

/* ==========================================================================
   14. Filament Deep Theme Overrides (Crystal-Clear Text in Dark & Light)
   ========================================================================== */

/* --- Page, Main Layout & Typography --- */
.fi-layout,
.fi-main {
  background-color: var(--mq-bg-base) !important;
  color: var(--mq-text-primary) !important;
}

.fi-page {
  color: var(--mq-text-primary) !important;
}

.fi-header-heading {
  color: var(--mq-text-primary) !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

.fi-header-subheading {
  color: var(--mq-text-secondary) !important;
  font-size: 13px !important;
}

.fi-breadcrumbs-item-label {
  color: var(--mq-text-muted) !important;
  font-weight: 600 !important;
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
  color: var(--mq-primary) !important;
  font-weight: 700 !important;
}

.fi-breadcrumbs-separator {
  color: var(--mq-text-muted) !important;
}

/* --- Topbar & Brand Header --- */
.fi-topbar {
  background-color: var(--mq-surface-1) !important;
  border-bottom: 1px solid var(--mq-border-subtle) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.dark .fi-topbar {
  background-color: #0B0D10 !important;
  border-bottom: 1px solid rgba(107, 90, 58, 0.28) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* User Menu & Avatar Circle ("GL") */
.fi-user-menu-trigger {
  border-radius: 9999px !important;
  border: 1.5px solid var(--mq-frame-bronze) !important;
  background: var(--mq-surface-2) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-user-menu-trigger:hover {
  border-color: var(--mq-primary) !important;
  box-shadow: 0 0 0 3px var(--mq-gold-tint) !important;
}

.fi-user-menu-trigger:active {
  transform: scale(0.97) !important;
}

/* Topbar User Avatar Circle */
.fi-user-menu-trigger [class*="avatar"],
.fi-user-avatar,
.fi-avatar {
  background: rgba(212, 175, 95, 0.16) !important;
  color: var(--mq-primary) !important;
  border: 1.5px solid var(--mq-frame-bronze) !important;
  font-weight: 800 !important;
}

.dark .fi-user-menu-trigger [class*="avatar"],
.dark .fi-user-avatar,
.dark .fi-avatar {
  background: rgba(212, 175, 95, 0.2) !important;
  color: #D4AF5F !important;
  border-color: #6B5A3A !important;
}

/* --- BUTTONS (Universal btn System) --- */
/* Primary Action Buttons */
.fi-btn-primary,
.fi-btn-color-primary,
.fi-ac-btn-action[data-color="primary"],
button.fi-btn-primary,
a.fi-btn-primary {
  background: var(--mq-gold-gradient) !important;
  color: #0B0D10 !important;
  font-weight: 800 !important;
  border: 1px solid var(--mq-frame-bronze) !important;
  border-radius: var(--mq-r-btn) !important;
  box-shadow: 0 3px 12px rgba(212, 175, 95, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-btn-primary:hover,
.fi-btn-color-primary:hover,
.fi-ac-btn-action[data-color="primary"]:hover {
  background: linear-gradient(135deg, #FFFFFF 0%, #F2E3B0 40%, #D4AF5F 100%) !important;
  box-shadow: 0 6px 20px rgba(212, 175, 95, 0.5) !important;
  transform: translateY(-1px) !important;
  color: #0B0D10 !important;
}

.fi-btn-primary:active,
.fi-btn-color-primary:active,
.fi-ac-btn-action[data-color="primary"]:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 1px 4px rgba(212, 175, 95, 0.25) !important;
}

.fi-btn-primary svg,
.fi-btn-primary i,
.fi-btn-color-primary svg {
  color: #0B0D10 !important;
}

/* Secondary / Gray Buttons */
.fi-btn-secondary,
.fi-btn-color-gray,
button.fi-btn-secondary {
  background: var(--mq-surface-2) !important;
  border: 1px solid var(--mq-border-subtle) !important;
  color: var(--mq-text-primary) !important;
  border-radius: var(--mq-r-btn) !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-btn-secondary:hover,
.fi-btn-color-gray:hover {
  border-color: var(--mq-primary) !important;
  color: var(--mq-primary) !important;
  background: var(--mq-surface-3) !important;
  transform: translateY(-1px) !important;
}

.fi-btn-secondary:active,
.fi-btn-color-gray:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Danger Buttons (Red Pillar) */
.fi-btn-danger,
.fi-btn-color-danger,
.fi-ac-btn-action[data-color="danger"] {
  background: var(--mq-red-500) !important;
  color: #FFFFFF !important;
  border: 1px solid #B72B24 !important;
  border-radius: var(--mq-r-btn) !important;
  box-shadow: 0 3px 12px rgba(217, 58, 50, 0.3) !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-btn-danger:hover,
.fi-btn-color-danger:hover {
  background: #B72B24 !important;
  box-shadow: 0 6px 18px rgba(217, 58, 50, 0.45) !important;
  transform: translateY(-1px) !important;
}

.fi-btn-danger:active,
.fi-btn-color-danger:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Success Buttons (Green Pillar) */
.fi-btn-success,
.fi-btn-color-success {
  background: var(--mq-green-500) !important;
  color: #FFFFFF !important;
  border: 1px solid #0B5A3E !important;
  border-radius: var(--mq-r-btn) !important;
  box-shadow: 0 3px 12px rgba(19, 138, 94, 0.3) !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.fi-btn-success:hover,
.fi-btn-color-success:hover {
  background: #0B5A3E !important;
  box-shadow: 0 6px 18px rgba(19, 138, 94, 0.45) !important;
  transform: translateY(-1px) !important;
}

.fi-btn-success:active,
.fi-btn-color-success:active {
  transform: translateY(0) scale(0.98) !important;
}

/* ==========================================================================
   14. TABLES — FULL SYSTEM GOLD & WHITE ARCHITECTURE (DARK & LIGHT MODES)
   ========================================================================== */

/* --- TABLE CONTAINER & ELEVATION --- */
.fi-ta-ctn {
  background-color: #FFFFFF !important;
  border: 1px solid #D9CDB5 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

.dark .fi-ta-ctn {
  background-color: #12151A !important;
  border: 1px solid rgba(107, 90, 58, 0.35) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
}

/* --- TABLE TOP TOOLBAR & HEADER BAR --- */
.fi-ta-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #EAE3D2 !important;
  padding: 16px 20px !important;
}

.dark .fi-ta-header {
  background-color: #12151A !important;
  border-bottom: 1px solid rgba(107, 90, 58, 0.25) !important;
}

.fi-ta-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

/* --- TABLE HEADERS (GOLD IN DARK MODE, REFINED BRONZE IN LIGHT) --- */
.fi-ta-table th,
.fi-ta-header-cell,
th.fi-ta-header-cell {
  background-color: #FAF6EE !important;
  border-bottom: 1px solid #D9CDB5 !important;
  padding: 13px 18px !important;
  transition: all 0.2s ease !important;
}

.fi-ta-header-cell-label,
.fi-ta-header-cell-label span,
.fi-ta-header-cell span,
.fi-ta-header-cell button {
  color: #7A6538 !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.dark .fi-ta-table th,
.dark .fi-ta-header-cell,
.dark th.fi-ta-header-cell {
  background-color: #181C22 !important;
  border-bottom: 1px solid rgba(107, 90, 58, 0.35) !important;
}

.dark .fi-ta-header-cell-label,
.dark .fi-ta-header-cell-label span,
.dark .fi-ta-header-cell span,
.dark .fi-ta-header-cell button,
.dark .fi-ta-header-cell-sort-icon {
  color: #D4AF5F !important;
  -webkit-text-fill-color: #D4AF5F !important;
  font-weight: 800 !important;
  font-size: 11.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.dark .fi-ta-header-cell svg,
.dark .fi-ta-header-cell i {
  color: #D4AF5F !important;
}

/* --- TABLE BODY ROWS & CELLS --- */
.fi-ta-row td,
.fi-ta-cell,
td.fi-ta-cell {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0EAE1 !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  transition: background-color 0.15s ease !important;
  vertical-align: middle !important;
}

.fi-ta-row:hover td,
.fi-ta-row:hover .fi-ta-cell {
  background-color: #F8F4EC !important;
}

.dark .fi-ta-row td,
.dark .fi-ta-cell,
.dark td.fi-ta-cell {
  background-color: #12151A !important;
  border-bottom: 1px solid rgba(38, 42, 49, 0.8) !important;
  transition: background-color 0.15s ease !important;
}

.dark .fi-ta-row:hover td,
.dark .fi-ta-row:hover .fi-ta-cell {
  background-color: #1A1F26 !important;
}

/* --- PRIMARY TEXT IN TABLE CELLS (CRISP PURE WHITE IN DARK MODE) --- */
.fi-ta-row td,
.fi-ta-cell,
.fi-ta-text-item,
.fi-ta-record-title {
  color: #15171A;
}

.dark .fi-ta-row td,
.dark .fi-ta-cell,
.dark .fi-ta-record-title,
.dark .fi-ta-text-item.font-bold span,
.dark .fi-ta-text-item.font-semibold span,
.dark .fi-ta-text-item .font-bold,
.dark .fi-ta-text-item .font-semibold,
.dark .fi-ta-row td strong,
.dark .fi-ta-row td b {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* Primary record titles in dark mode */
.dark .fi-ta-table td .fi-ta-text-item:not([class*="text-gray-"]):not([class*="text-custom-"]):not(.fi-color-gray) > .fi-ta-text-item-label {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* --- SECONDARY TEXT & EMAILS & CODES (RADIANT GOLD IN DARK MODE) --- */
/* Fixes the dark-grey invisible text in dark mode across ALL tables in system */
.dark .fi-ta-cell .text-gray-500,
.dark .fi-ta-cell .text-gray-400,
.dark .fi-ta-cell .text-gray-600,
.dark .fi-ta-cell .text-gray-700,
.dark .fi-ta-cell .text-gray-800,
.dark .fi-ta-cell .text-gray-900,
.dark .fi-ta-cell [class*="text-gray-"],
.dark .fi-ta-cell .text-custom-500,
.dark .fi-ta-cell .text-custom-400,
.dark .fi-ta-cell .text-custom-600,
.dark .fi-ta-cell [class*="text-custom-"],
.dark .fi-ta-cell .fi-color-gray,
.dark .fi-ta-cell .fi-color-gray *,
.dark .fi-ta-record-description,
.dark .fi-ta-text-item-description,
.dark .fi-ta-cell-description,
.dark .fi-ta-table td a:not(.fi-btn):not([class*="fi-btn"]),
.dark .fi-ta-table td span.text-sm:not(.font-bold):not(.font-semibold),
.dark .fi-ta-table td span.text-xs {
  color: #D4AF5F !important;
  -webkit-text-fill-color: #D4AF5F !important;
}

/* Secondary text in light mode */
.fi-ta-cell .text-gray-500,
.fi-ta-cell .text-gray-400,
.fi-ta-cell [class*="text-gray-"],
.fi-ta-record-description,
.fi-ta-text-item-description,
.fi-ta-cell-description {
  color: #6E6A60 !important;
}

/* --- TABLE CELL ICONS (GOLD ACCENTS) --- */
.fi-ta-cell svg,
.fi-ta-cell i,
.fi-ta-text-item-icon {
  color: #B38A3C !important;
  flex-shrink: 0 !important;
}

.dark .fi-ta-cell svg:not(.text-danger-500):not(.text-success-500),
.dark .fi-ta-cell i,
.dark .fi-ta-text-item-icon:not(.text-danger-500):not(.text-success-500),
.dark .fi-ta-table td svg:not(.text-danger-500):not(.text-success-500),
.dark .fi-ta-table td i {
  color: #D4AF5F !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)) !important;
}

/* Boolean Icon Columns: Preserve Success Green & Danger Red */
.fi-ta-cell svg.text-success-500,
.dark .fi-ta-cell svg.text-success-500,
.dark .fi-ta-cell .fi-ta-icon-item.text-success-500 svg,
.dark .fi-ta-cell [class*="text-success-"] svg {
  color: #3DBB8C !important;
}

.fi-ta-cell svg.text-danger-500,
.dark .fi-ta-cell svg.text-danger-500,
.dark .fi-ta-cell .fi-ta-icon-item.text-danger-500 svg,
.dark .fi-ta-cell [class*="text-danger-"] svg {
  color: #FF6B64 !important;
}

/* --- TABLE BADGES (HIGH CONTRAST OBSIDIAN & GOLD) --- */
.fi-ta-cell .fi-badge,
.fi-badge {
  font-weight: 700 !important;
  font-size: 11.5px !important;
  letter-spacing: 0.03em !important;
}

/* Gray Badges in Table (e.g. Branch All Branches, Lang en/ar, etc.) */
.dark .fi-ta-cell .fi-badge.fi-color-gray,
.dark .fi-ta-cell .fi-badge[class*="gray"],
.dark .fi-badge.fi-color-gray,
.dark .fi-badge[class*="gray"],
.dark .fi-color-gray .fi-badge {
  background-color: #1F232A !important;
  border: 1px solid #6B5A3A !important;
  color: #F4EEDD !important;
  -webkit-text-fill-color: #F4EEDD !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}

/* Warning / Gold Badges (admin, roles, etc.) */
.dark .fi-badge.fi-color-warning,
.dark .fi-badge[class*="warning"],
.dark .fi-badge.fi-color-amber,
.dark .fi-badge[class*="amber"],
.dark .fi-color-warning .fi-badge {
  background-color: rgba(212, 175, 95, 0.16) !important;
  border: 1px solid #D4AF5F !important;
  color: #F2E3B0 !important;
  -webkit-text-fill-color: #F2E3B0 !important;
}

/* Danger / Red Badges (super_admin, cancelled, failed) */
.dark .fi-badge.fi-color-danger,
.dark .fi-badge[class*="danger"],
.dark .fi-color-danger .fi-badge {
  background-color: rgba(217, 58, 50, 0.16) !important;
  border: 1px solid #D93A32 !important;
  color: #FF6B64 !important;
  -webkit-text-fill-color: #FF6B64 !important;
}

/* Success / Green Badges (sales, active, enrolled) */
.dark .fi-badge.fi-color-success,
.dark .fi-badge[class*="success"],
.dark .fi-badge.fi-color-emerald,
.dark .fi-color-success .fi-badge {
  background-color: rgba(19, 138, 94, 0.18) !important;
  border: 1px solid #138A5E !important;
  color: #3DBB8C !important;
  -webkit-text-fill-color: #3DBB8C !important;
}

/* Primary / Info Badges */
.dark .fi-badge.fi-color-primary,
.dark .fi-badge.fi-color-info,
.dark .fi-badge[class*="indigo"],
.dark .fi-color-primary .fi-badge {
  background-color: #181C22 !important;
  border: 1px solid #6B5A3A !important;
  color: #D4AF5F !important;
  -webkit-text-fill-color: #D4AF5F !important;
}

/* --- TABLE SEARCH, FILTER & TOOLBAR CONTROLS --- */
.fi-ta-search-field input,
.fi-ta-header-toolbar input {
  background-color: #FAF6EE !important;
  border: 1.5px solid #D9CDB5 !important;
  color: #15171A !important;
  border-radius: 12px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  transition: all 0.2s ease !important;
}

.fi-ta-search-field input:focus,
.fi-ta-header-toolbar input:focus {
  border-color: #B38A3C !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 95, 0.2) !important;
  outline: none !important;
}

.dark .fi-ta-search-field input,
.dark .fi-ta-header-toolbar input {
  background-color: #181C22 !important;
  border: 1.5px solid #6B5A3A !important;
  color: #FFFFFF !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35) !important;
}

.dark .fi-ta-search-field input::placeholder,
.dark .fi-ta-header-toolbar input::placeholder {
  color: #B8B0A0 !important;
}

.dark .fi-ta-search-field input:focus,
.dark .fi-ta-header-toolbar input:focus {
  border-color: #D4AF5F !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 95, 0.25) !important;
}

/* Filter trigger & Column visibility buttons */
.fi-ta-filter-trigger,
.fi-ta-filter-trigger button,
.fi-ta-col-trigger,
.fi-ta-col-trigger button {
  color: #7A6538 !important;
  transition: all 0.2s ease !important;
}

.dark .fi-ta-filter-trigger,
.dark .fi-ta-filter-trigger button,
.dark .fi-ta-col-trigger,
.dark .fi-ta-col-trigger button,
.dark .fi-ta-header-toolbar button {
  color: #D4AF5F !important;
}

.dark .fi-ta-filter-trigger svg,
.dark .fi-ta-col-trigger svg {
  color: #D4AF5F !important;
}

/* Filter count badge */
.fi-ta-filter-trigger .fi-badge {
  background: #D93A32 !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Checkboxes in Table */
.fi-ta-record-checkbox,
.fi-ta-cell input[type="checkbox"],
.fi-ta-header-cell input[type="checkbox"] {
  accent-color: #D4AF5F !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

/* --- TABLE ACTION BUTTONS (VIEW, EDIT, DELETE) --- */
.fi-ta-actions .fi-link,
.fi-ta-actions .fi-btn,
.fi-ta-actions a,
.fi-ta-actions button {
  color: #15171A !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.fi-ta-actions .fi-link:hover,
.fi-ta-actions a:hover {
  color: #B38A3C !important;
}

.dark .fi-ta-actions .fi-link,
.dark .fi-ta-actions .fi-btn,
.dark .fi-ta-actions a,
.dark .fi-ta-actions button {
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.dark .fi-ta-actions .fi-link:hover,
.dark .fi-ta-actions a:hover {
  color: #D4AF5F !important;
}

.dark .fi-ta-actions svg {
  color: #D4AF5F !important;
}

/* --- TABLE EMPTY STATE --- */
.dark .fi-ta-empty-state-heading {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

.dark .fi-ta-empty-state-description {
  color: #D4AF5F !important;
  font-size: 13.5px !important;
}

.dark .fi-ta-empty-state-icon,
.dark .fi-ta-empty-state-icon svg {
  color: #D4AF5F !important;
}

/* --- TABLE PAGINATION --- */
.fi-ta-pagination {
  padding: 14px 20px !important;
  border-top: 1px solid #EAE3D2 !important;
  background-color: #FFFFFF !important;
}

.dark .fi-ta-pagination {
  border-top: 1px solid rgba(107, 90, 58, 0.25) !important;
  background-color: #12151A !important;
}

.dark .fi-ta-pagination span,
.dark .fi-ta-pagination p {
  color: #B8B0A0 !important;
}

.dark .fi-ta-pagination strong,
.dark .fi-ta-pagination b {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Pagination Active & Inactive Items */
.fi-pagination-item.fi-active .fi-pagination-item-btn,
.fi-pagination-item-btn[aria-current="page"],
li.fi-active button {
  background: var(--mq-gold-gradient) !important;
  color: #0B0D10 !important;
  -webkit-text-fill-color: #0B0D10 !important;
  font-weight: 800 !important;
  border: 1px solid var(--mq-frame-bronze) !important;
  box-shadow: 0 2px 8px rgba(212, 175, 95, 0.35) !important;
}

.fi-pagination-item-btn {
  border-radius: 8px !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.dark .fi-pagination-item-btn:not([aria-current="page"]) {
  background-color: #181C22 !important;
  border: 1px solid #262A31 !important;
  color: #F4EEDD !important;
}

.dark .fi-pagination-item-btn:hover:not([aria-current="page"]) {
  border-color: #D4AF5F !important;
  color: #D4AF5F !important;
}

/* --- COLLAPSES & ACCORDIONS (Section & Collapsible Containers) --- */
.fi-section,
.fi-section-content-ctn {
  background-color: var(--mq-surface-1) !important;
  border: 1px solid var(--mq-border-subtle) !important;
  border-radius: var(--mq-r-card) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.dark .fi-section,
.dark .fi-section-content-ctn {
  background-color: #12151A !important;
  border-color: #6B5A3A !important;
}

.fi-section-header {
  background-color: var(--mq-surface-2) !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--mq-border-subtle) !important;
  border-top-left-radius: var(--mq-r-card) !important;
  border-top-right-radius: var(--mq-r-card) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.dark .fi-section-header {
  background-color: #181C22 !important;
  border-bottom-color: #2A2C33 !important;
}

.fi-section-header:hover {
  background-color: var(--mq-surface-3) !important;
}

.fi-section-header-heading {
  color: var(--mq-text-primary) !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
}

.dark .fi-section-header-heading {
  color: #F4EEDD !important;
}

.fi-section-header-subheading {
  color: var(--mq-text-secondary) !important;
  font-size: 12px !important;
}

/* Collapse Toggle Chevron Icon */
.fi-section-header-btn svg,
.fi-section-collapse-btn svg,
details summary::after {
  color: var(--mq-primary) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Native Details / Summary Accordion Overrides */
details {
  border: 1px solid var(--mq-border-subtle) !important;
  border-radius: var(--mq-r-card) !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
}

details[open] {
  border-color: var(--mq-frame-bronze) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

details summary {
  background: var(--mq-surface-2) !important;
  color: var(--mq-text-primary) !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  cursor: pointer !important;
  user-select: none !important;
  outline: none !important;
}

.dark details summary {
  background: #181C22 !important;
  color: #F4EEDD !important;
}

details summary:hover {
  background: var(--mq-surface-3) !important;
  color: var(--mq-primary) !important;
}

/* --- FORMS & INPUTS --- */
.fi-input,
.fi-select-input,
select.fi-select-input,
textarea.fi-input {
  background-color: var(--mq-surface-2) !important;
  border: 1.5px solid var(--mq-border-subtle) !important;
  color: var(--mq-text-primary) !important;
  border-radius: var(--mq-r-input) !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.dark .fi-input,
.dark .fi-select-input,
.dark select.fi-select-input,
.dark textarea.fi-input {
  background-color: #181C22 !important;
  border-color: #2A2C33 !important;
  color: #F4EEDD !important;
}

.fi-input:focus,
.fi-select-input:focus,
textarea.fi-input:focus {
  border-color: var(--mq-primary) !important;
  box-shadow: 0 0 0 3px var(--mq-gold-tint) !important;
  outline: none !important;
}

.fi-fo-field-wrp-label span {
  color: var(--mq-text-primary) !important;
  font-weight: 700 !important;
}

.dark .fi-fo-field-wrp-label span {
  color: #F4EEDD !important;
}

.fi-fo-field-wrp-helper-text {
  color: var(--mq-text-muted) !important;
  font-size: 11.5px !important;
}

/* Checkbox & Radio Inputs */
.fi-checkbox-input:checked,
.fi-radio-input:checked {
  background-color: var(--mq-primary) !important;
  border-color: var(--mq-primary) !important;
}

.fi-checkbox-input:focus,
.fi-radio-input:focus {
  box-shadow: 0 0 0 3px var(--mq-gold-tint) !important;
}

/* --- MODALS & DIALOGS --- */
.fi-modal-window {
  background-color: var(--mq-surface-1) !important;
  border: 1.5px solid var(--mq-frame-bronze) !important;
  border-radius: var(--mq-r-modal) !important;
  color: var(--mq-text-primary) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
}

.dark .fi-modal-window {
  background-color: #12151A !important;
  border-color: #6B5A3A !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8) !important;
}

.fi-modal-header {
  border-bottom: 1px solid var(--mq-border-subtle) !important;
  padding: 18px 24px !important;
}

.fi-modal-heading {
  color: var(--mq-text-primary) !important;
  font-weight: 800 !important;
  font-size: 16px !important;
}

.dark .fi-modal-heading {
  color: #F4EEDD !important;
}

.fi-modal-footer {
  border-top: 1px solid var(--mq-border-subtle) !important;
  padding: 16px 24px !important;
  background-color: var(--mq-surface-2) !important;
}

.dark .fi-modal-footer {
  background-color: #181C22 !important;
  border-top-color: #2A2C33 !important;
}

/* --- DROPDOWNS & POPOVERS --- */
.fi-dropdown-panel {
  background-color: var(--mq-surface-1) !important;
  border: 1.5px solid var(--mq-border-subtle) !important;
  border-radius: var(--mq-r-card) !important;
  color: var(--mq-text-primary) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

.dark .fi-dropdown-panel {
  background-color: #181C22 !important;
  border-color: #6B5A3A !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75) !important;
}

.fi-dropdown-list-item {
  color: var(--mq-text-primary) !important;
  transition: all 0.15s ease !important;
}

.fi-dropdown-list-item:hover {
  background-color: var(--mq-gold-tint) !important;
  color: var(--mq-primary) !important;
}

.dark .fi-dropdown-list-item {
  color: #F4EEDD !important;
}

.dark .fi-dropdown-list-item:hover {
  background-color: rgba(212, 175, 95, 0.15) !important;
  color: #D4AF5F !important;
}

/* --- TABS & NAVIGATION PILLS --- */
.fi-tabs-item-btn {
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  color: var(--mq-text-secondary) !important;
}

.fi-tabs-item.fi-active .fi-tabs-item-btn,
.fi-tabs-item-btn[aria-selected="true"] {
  background: var(--mq-gold-gradient) !important;
  color: #0B0D10 !important;
  box-shadow: 0 3px 10px rgba(212, 175, 95, 0.35) !important;
  border: 1px solid var(--mq-frame-bronze) !important;
}

.fi-tabs-item-btn:hover:not([aria-selected="true"]) {
  color: var(--mq-primary) !important;
  background: var(--mq-gold-tint) !important;
}

/* --- CLICK & INTERACTION FEEDBACK (WHEN CLICK ANYTHING) --- */
a:active,
button:active,
.tcms-chip-btn:active,
.tcms-filter-btn:active,
.tcms-location-btn:active,
.fi-btn:active,
.fi-sidebar-item-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}

/* Outline Focus Rings across entire UI */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--mq-bg-base), 0 0 0 4px var(--mq-primary) !important;
}

/* Scrollbars in Obsidian / Gold Identity */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--mq-bg-base);
}
::-webkit-scrollbar-thumb {
  background: var(--mq-frame-bronze);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mq-primary);
}

/* ==========================================================================
   15. Moqatel Design System Workbench Workspace Integration
   ========================================================================== */
.fi-page:has(.mq-design-system-workbench) {
  max-width: 100% !important;
  width: 100% !important;
}

.fi-page:has(.mq-design-system-workbench) .fi-page-header {
  margin-bottom: 8px !important;
}

.mq-design-system-workbench {
  width: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45) !important;
  border: 1px solid rgba(107, 90, 58, 0.3) !important;
}

/* ==========================================================================
   16. WCAG AA STRICT CONTRAST & LEGIBILITY ENGINE (LIGHT & DARK MODES)
   ========================================================================== */

/* --- 16.1 STATS OVERVIEW WIDGET (KPI CARDS) --- */
.fi-wi-stats-overview-stat {
  background: #FFFFFF !important;
  border: 1px solid #D9CDB5 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 16px -2px rgba(107, 90, 58, 0.08) !important;
}

.dark .fi-wi-stats-overview-stat {
  background: #12151A !important;
  border: 1px solid #6B5A3A !important;
  box-shadow: 0 6px 24px -3px rgba(0, 0, 0, 0.6) !important;
}

.fi-wi-stats-overview-stat header span,
.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat [class*="label"] {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #7A6538 !important;
  letter-spacing: 0.02em !important;
}

.dark .fi-wi-stats-overview-stat header span,
.dark .fi-wi-stats-overview-stat-label,
.dark .fi-wi-stats-overview-stat [class*="label"] {
  color: #D1C9B8 !important;
  font-weight: 700 !important;
}

.fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat [class*="value"] {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0F172A !important;
}

.dark .fi-wi-stats-overview-stat-value,
.dark .fi-wi-stats-overview-stat [class*="value"] {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

.fi-wi-stats-overview-stat [class*="description"] {
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* --- 16.2 TOPBAR GLOBAL SEARCH --- */
.fi-global-search-field input,
.fi-topbar input {
  background-color: #FAF6EE !important;
  border: 1.5px solid #D9CDB5 !important;
  color: #0F172A !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.fi-global-search-field input::placeholder,
.fi-topbar input::placeholder {
  color: #736B5E !important;
  opacity: 1 !important;
}

.fi-global-search-field input:focus,
.fi-topbar input:focus {
  background-color: #FFFFFF !important;
  border-color: #B38A3C !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 95, 0.25) !important;
  outline: none !important;
}

.dark .fi-global-search-field input,
.dark .fi-topbar input {
  background-color: #181C22 !important;
  border: 1.5px solid rgba(107, 90, 58, 0.6) !important;
  color: #F8FAFC !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.dark .fi-global-search-field input::placeholder,
.dark .fi-topbar input::placeholder {
  color: #A8A090 !important;
  opacity: 1 !important;
}

.dark .fi-global-search-field input:focus,
.dark .fi-topbar input:focus {
  background-color: #1F232A !important;
  border-color: #D4AF5F !important;
  box-shadow: 0 0 0 3px rgba(212, 175, 95, 0.3) !important;
}

/* --- 16.3 SIDEBAR NAVIGATION & HEADINGS --- */
.fi-sidebar-group-label,
.fi-sidebar-group-label span,
.fi-sidebar-group-btn,
.fi-sidebar-group-btn span {
  color: #7A6538 !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  font-size: 11.5px !important;
}

.dark .fi-sidebar-group-label,
.dark .fi-sidebar-group-label span,
.dark .fi-sidebar-group-btn,
.dark .fi-sidebar-group-btn span {
  color: #D4AF5F !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  font-size: 11.5px !important;
}

.fi-sidebar-item-label {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1E293B !important;
}

.dark .fi-sidebar-item-label {
  color: #E2E8F0 !important;
}

.fi-sidebar-group-items > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-nav > .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-group-items > .fi-sidebar-item.fi-sidebar-item-active > .fi-sidebar-item-btn > .fi-sidebar-item-label,
.fi-sidebar-item-btn[aria-current="page"] > .fi-sidebar-item-label {
  color: #0B0D10 !important;
  font-weight: 800 !important;
}

/* --- 16.4 GENERAL FORM INPUTS, LABELS & HELPER TEXT --- */
.fi-fo-field-wrp-label,
.fi-fo-field-wrp-label span {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
}

.dark .fi-fo-field-wrp-label,
.dark .fi-fo-field-wrp-label span {
  color: #F8FAFC !important;
}

.fi-fo-field-wrp-helper-text {
  font-size: 12px !important;
  color: #64748B !important;
}

.dark .fi-fo-field-wrp-helper-text {
  color: #CBD5E1 !important;
}

.fi-input,
.fi-select-input {
  color: #0F172A !important;
}

.dark .fi-input,
.dark .fi-select-input {
  color: #F8FAFC !important;
}

.fi-input::placeholder,
.fi-select-input::placeholder {
  color: #736B5E !important;
}

.dark .fi-input::placeholder,
.dark .fi-select-input::placeholder {
  color: #A8A090 !important;
}

/* --- 16.5 FILAMENT TABLES (HEADERS, CELLS & EMPTY STATES) --- */
.fi-ta-header-cell-label,
.fi-ta-header-cell span {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #6B5A3A !important;
}

.dark .fi-ta-header-cell-label,
.dark .fi-ta-header-cell span {
  color: #D1C9B8 !important;
}

.fi-ta-cell,
.fi-ta-cell span,
.fi-ta-text-item {
  color: #1E293B !important;
}

.dark .fi-ta-cell,
.dark .fi-ta-cell span,
.dark .fi-ta-text-item {
  color: #E2E8F0 !important;
}

.fi-ta-empty-state-heading {
  color: #0F172A !important;
}

.dark .fi-ta-empty-state-heading {
  color: #F8FAFC !important;
}

.fi-ta-empty-state-description {
  color: #64748B !important;
}

.dark .fi-ta-empty-state-description {
  color: #CBD5E1 !important;
}

/* --- 16.6 FILAMENT BREADCRUMBS & PAGE HEADINGS --- */
.fi-header-heading {
  color: #0F172A !important;
  font-weight: 800 !important;
}

.dark .fi-header-heading {
  color: #F8FAFC !important;
}

.fi-header-subheading {
  color: #64748B !important;
}

.dark .fi-header-subheading {
  color: #CBD5E1 !important;
}

.fi-breadcrumbs-item-label {
  color: #64748B !important;
}

.dark .fi-breadcrumbs-item-label {
  color: #CBD5E1 !important;
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
  color: #B38A3C !important;
  font-weight: 700 !important;
}

.dark .fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
  color: #D4AF5F !important;
}