/* ==========================================================================
     1. Brand & Accent (Calibrated directly to the AL-MARMOUQ Gold Logo)
     ========================================================================== */

 :root {
     --primary-50: #FAF6ED;
     /* Subtle warm cream tint for active states & tags */
     --primary-100: #F3EBD8;
     /* Soft golden parchment border */
     --primary-200: #E6D4AA;
     /* Muted pale brass */
     --primary-300: #D4B976;
     /* Soft champagne gold */
     --primary-400: #BE9D47;
     /* Muted gold */
     --primary-500: #A88624;
     /* Deep classic gold */
     --primary-600: #8F7300;
     /* EXACT AL-MARMOUQ LOGO BRAND COLOR */
     --primary-700: #735C00;
     /* Rich bronze-gold hover */
     --primary-800: #574600;
     /* Pressed deep bronze */
     --primary-900: #3D3100;
     /* Deep antique gold shadow */

     --brand: var(--primary-600);
     --button-secondary: var(--primary-50);

     /* ==========================================================================
     2. Neutrals (Infiltrated with Warm Linen & Light Timber Undertones)
     Replaces generic cold blue-grays with soft, warm, natural tones
     ========================================================================== */
     --neutral-50: #FAF8F5;
     /* Main Dashboard Canvas: Warm Silk / Off-White */
     --neutral-100: #F4EFEA;
     /* Soft table headers & subtle card wells */
     --neutral-200: #E8DFD5;
     /* Dividers, borders, subtle separators */
     --neutral-300: #D2C4B5;
     /* Inactive states & secondary strokes */
     --neutral-400: #A39382;
     /* Secondary helper text & muted timestamps */
     --neutral-500: #7A6C5D;
     /* Body typography & readable labels */
     --neutral-600: #5A4E42;
     /* High-readability secondary copy */
     --neutral-700: #42382F;
     /* Form labels & table headings */
     --neutral-800: #2C241D;
     /* Deep wood grain accents */
     --neutral-900: #1B1511;
     /* High-contrast primary headings */

     --gold: #C5A059;
     --gold-secondary: #D4AF37;
     --gold-hover: #B08D45;

     /* Global Surface Controls */
     --base: #FFFFFF;
     --white: var(--base);
     --bg-color: var(--neutral-50);
     --text-primary-light: var(--neutral-900);
     --text-secondary-light: var(--neutral-500);
     --border-color: var(--neutral-200);

     /* Subtle Warm Card & Elevation Shadows */
     --shadow-4: 0 4px 20px 0 rgba(66, 56, 47, 0.05);
 }

 /* ==========================================================================
   2.1 Royal Gold Accents & Luxury Status Chips
   ========================================================================== */
 .text-gold {
     color: #C5A059 !important;
 }
 .bg-gold {
     background-color: #C5A059 !important;
     color: #FFFFFF !important;
 }
 .border-gold {
     border-color: #C5A059 !important;
 }
 .bg-warning-50 {
     background-color: #FFF9E2 !important;
 }
 .text-warning-700 {
     color: #C28800 !important;
 }
 .bg-purple-50 {
     background-color: #F6F1FD !important;
 }
 .text-purple-700 {
     color: #6927DA !important;
 }
 .bg-primary-50 {
     background-color: #FAF6ED !important;
 }
 .text-primary-600 {
     color: #8F7300 !important;
 }

 /* ==========================================================================
   3. Dark Mode Calibration (Warm Obsidian Base #0D1B2A & Panel #162235)
   ========================================================================== */
 [data-theme="dark"] {
     --obsidian-base: #0D1B2A;
     --obsidian-panel: #162235;
     --base: #0D1B2A;
     --white: #162235;
     /* Dark Card & Panel Surface */
     --bg-color: #0D1B2A;
     /* Dark Canvas Background */

     --border-color: #23354E;
     --text-primary-light: #F4F7FB;
     --text-secondary-light: #B0C4DE;

     --neutral-50: #0D1B2A;
     --neutral-100: #162235;
     --neutral-200: #23354E;
     --neutral-300: #384A65;
     --neutral-400: #5C7292;
     --neutral-500: #889EB8;
     --neutral-600: #B0C4DE;
     --neutral-700: #CAD6E8;
     --neutral-800: #E2EAF4;
     --neutral-900: #F4F7FB;

     --primary-50: rgba(197, 160, 89, 0.15);
     --button-secondary: var(--neutral-200);
 }

/* Dark mode utility class support */
  [data-theme="dark"] .dark\:border-neutral-600 { border-color: #384A65 !important; }
  [data-theme="dark"] .dark\:border-neutral-700 { border-color: #23354E !important; }
  [data-theme="dark"] .dark\:border-neutral-800 { border-color: #1B293E !important; }
  [data-theme="dark"] .dark\:bg-neutral-700 { background-color: #1E2D42 !important; }
  [data-theme="dark"] .dark\:bg-neutral-800 { background-color: #162235 !important; }
  [data-theme="dark"] .dark\:bg-neutral-900 { background-color: #0D1B2A !important; }
  [data-theme="dark"] .dark\:text-white { color: #FFFFFF !important; }
  [data-theme="dark"] .dark\:text-neutral-100 { color: #F4F7FB !important; }
  [data-theme="dark"] .dark\:text-neutral-200 { color: #E2EAF4 !important; }
  [data-theme="dark"] .dark\:text-neutral-300 { color: #CAD6E8 !important; }
  [data-theme="dark"] .dark\:text-neutral-400 { color: #B0C4DE !important; }
  [data-theme="dark"] .dark\:text-primary-400 { color: #D4B976 !important; }

  /* Bootstrap utility remaps under [data-theme="dark"] (no data-bs-theme in app) */
  [data-theme="dark"] .bg-white { background-color: #162235 !important; }
  [data-theme="dark"] .text-dark { color: #F4F7FB !important; }
  [data-theme="dark"] .text-muted { color: #B0C4DE !important; }
  [data-theme="dark"] .text-body { color: #F4F7FB !important; }
  [data-theme="dark"] .text-black-50 { color: rgba(244, 247, 251, 0.65) !important; }
  [data-theme="dark"] .bg-body { background-color: #0D1B2A !important; }
  [data-theme="dark"] .bg-body-tertiary { background-color: #162235 !important; }
  [data-theme="dark"] .dropdown-menu { background-color: #162235 !important; border-color: #23354E !important; }
  [data-theme="dark"] .dropdown-item { color: #E2EAF4 !important; }
  [data-theme="dark"] .dropdown-item:hover,
  [data-theme="dark"] .dropdown-item:focus { background-color: #23354E !important; color: #FFFFFF !important; }
  [data-theme="dark"] .modal-content { background-color: #162235 !important; color: #F4F7FB !important; }
  [data-theme="dark"] .offcanvas { background-color: #162235 !important; }
  [data-theme="dark"] .alert { color: #F4F7FB !important; }
  [data-theme="dark"] .form-control,
  [data-theme="dark"] .form-select { background-color: #0D1B2A !important; border-color: #384A65 !important; color: #F4F7FB !important; }
  [data-theme="dark"] .form-control::placeholder { color: #889EB8 !important; }
  [data-theme="dark"] .accordion-body { background-color: #162235 !important; color: #F4F7FB !important; }
  [data-theme="dark"] .accordion-button { background-color: #162235 !important; color: #F4F7FB !important; }
  [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #23354E !important; color: #F4F7FB !important; }
  [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #F4F7FB; --bs-table-border-color: #23354E; }
  [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(22, 34, 53, 0.55); }
  [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
  [data-theme="dark"] .nav-pills .nav-link { color: #CAD6E8; }
  [data-theme="dark"] .nav-pills .nav-link.active { background-color: #8F7300; color: #FFFFFF; }
  [data-theme="dark"] .list-group-item { background-color: #162235 !important; border-color: #23354E !important; color: #F4F7FB !important; }
  [data-theme="dark"] .card { background-color: #162235 !important; border-color: #23354E !important; color: #F4F7FB !important; }
  [data-theme="dark"] .card-header,
  [data-theme="dark"] .card-footer { background-color: #162235 !important; border-color: #23354E !important; }
  [data-theme="dark"] .badge.bg-neutral-100 { background-color: #23354E !important; color: #E2EAF4 !important; }
  [data-theme="dark"] .badge.bg-neutral-200 { background-color: #23354E !important; color: #E2EAF4 !important; }
  [data-theme="dark"] .bg-neutral-50 { background-color: #0D1B2A !important; }
  [data-theme="dark"] .bg-neutral-100 { background-color: #162235 !important; }
  [data-theme="dark"] .text-neutral-800 { color: #E2EAF4 !important; }
  [data-theme="dark"] .text-neutral-900 { color: #F4F7FB !important; }

  /* Additional dark: utilities used across module views */
  [data-theme="dark"] .dark\:bg-primary-900\/20 { background-color: rgba(197, 160, 89, 0.2) !important; }
  [data-theme="dark"] .dark\:bg-primary-900\/25 { background-color: rgba(197, 160, 89, 0.25) !important; }
  [data-theme="dark"] .dark\:bg-primary-900\/30 { background-color: rgba(197, 160, 89, 0.3) !important; }
  [data-theme="dark"] .dark\:bg-success-600\/20 { background-color: rgba(69, 179, 105, 0.2) !important; }
  [data-theme="dark"] .dark\:bg-success-900\/20 { background-color: rgba(69, 179, 105, 0.2) !important; }
  [data-theme="dark"] .dark\:bg-danger-600\/20 { background-color: rgba(239, 74, 0, 0.2) !important; }
  [data-theme="dark"] .dark\:bg-danger-900\/20 { background-color: rgba(239, 74, 0, 0.2) !important; }
  [data-theme="dark"] .dark\:bg-warning-900\/20 { background-color: rgba(255, 159, 41, 0.2) !important; }
  [data-theme="dark"] .dark\:bg-info-900\/20 { background-color: rgba(20, 75, 214, 0.25) !important; }
  [data-theme="dark"] .dark\:bg-dark-2 { background-color: #162235 !important; }
  [data-theme="dark"] .dark\:text-success-300 { color: #7ED9A0 !important; }
  [data-theme="dark"] .dark\:text-danger-300 { color: #FF8A66 !important; }
  [data-theme="dark"] .dark\:text-warning-300 { color: #FFC978 !important; }
  [data-theme="dark"] .dark\:text-info-300 { color: #7EB0FF !important; }
  [data-theme="dark"] .dark\:text-primary-300 { color: #D4B976 !important; }
  [data-theme="dark"] .dark\:border-primary-800 { border-color: #574600 !important; }
  [data-theme="dark"] .dark\:hover-bg-neutral-800:hover { background-color: #162235 !important; }
  [data-theme="dark"] .dark\:btn-outline-neutral-700 { border-color: #23354E !important; color: #CAD6E8 !important; }
  [data-theme="dark"] .dark\:bg-neutral-800\/40 { background-color: rgba(22, 34, 53, 0.4) !important; }
  [data-theme="dark"] .dark\:bg-neutral-800\/50 { background-color: rgba(22, 34, 53, 0.5) !important; }
  [data-theme="dark"] .dark\:text-neutral-500 { color: #889EB8 !important; }
  [data-theme="dark"] .dark\:text-neutral-600 { color: #B0C4DE !important; }
  [data-theme="dark"] .dark\:text-neutral-700 { color: #CAD6E8 !important; }

  /* ==========================================================================
     3.1 Glassmorphic Panels & Obsidian Invariance (Phase 4)
     ========================================================================== */
  :root {
      --obsidian-base: #0D1B2A;
      --obsidian-panel: #162235;
      --obsidian-border: #23354E;
      --obsidian-text: #F4F7FB;
      --glass-bg: rgba(255, 255, 255, 0.72);
      --glass-border: rgba(13, 27, 42, 0.08);
      --glass-blur: 14px;
  }

  [data-theme="dark"] {
      --glass-bg: rgba(22, 34, 53, 0.78);
      --glass-border: rgba(197, 160, 89, 0.12);
  }

  .glass-panel {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      border: 1px solid var(--glass-border);
      border-radius: 12px;
      box-shadow: 0 4px 24px rgba(13, 27, 42, 0.08);
  }

  [data-theme="dark"] .glass-panel {
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  }

  .obsidian-panel {
      background-color: var(--obsidian-panel);
      border: 1px solid var(--obsidian-border);
      border-radius: 12px;
      color: var(--obsidian-text);
  }

  .obsidian-border {
      border-color: var(--obsidian-border) !important;
  }

  .obsidian-text {
      color: var(--obsidian-text);
  }

  .status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-inline-end: 6px;
      vertical-align: middle;
  }

  .status-pending { background-color: var(--warning-main, #FF9F29); }
  .status-active { background-color: var(--success-main, #45B369); }
  .status-complete { background-color: var(--primary-600, #8F7300); }
  .status-blocked { background-color: var(--danger-main, #EF4A00); }
  .status-queued { background-color: var(--info-main, #144BD6); }

  /* ==========================================================================
     3.2 Live Clock & Hardware Telemetry Widget
     ========================================================================== */
  .sys-telemetry {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px;
      border-radius: 8px;
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      border: 1px solid var(--glass-border);
      font-size: 0.75rem;
      line-height: 1.2;
      color: var(--text-secondary-light);
      white-space: nowrap;
  }

  .sys-telemetry .sys-clock {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
      color: var(--text-primary-light);
      letter-spacing: 0.02em;
  }

  .sys-telemetry .sys-clock-date {
      font-size: 0.6875rem;
      opacity: 0.85;
  }

  .sys-telemetry .sys-metric {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding-inline-start: 10px;
      border-inline-start: 1px solid var(--border-color);
  }

  .sys-telemetry .sys-metric .dot-ok {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--success-main, #45B369);
      box-shadow: 0 0 0 2px rgba(69, 179, 105, 0.25);
  }

  .sys-telemetry .sys-metric .dot-warn {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--warning-main, #FF9F29);
      box-shadow: 0 0 0 2px rgba(255, 159, 41, 0.25);
  }

  @media (max-width: 991.98px) {
      .sys-telemetry .sys-hide-md { display: none; }
  }

  @media (max-width: 575.98px) {
      .sys-telemetry .sys-hide-sm { display: none; }
  }

  /* ==========================================================================
     4. Bidi / Unicode Direction Utilities
     Only enforce RTL bidi when the active language is Arabic (lang="ar")
     ========================================================================== */
  html[lang="ar"] .enforce-bidi {
      direction: rtl;
      unicode-bidi: bidi-override;
  }

  html[lang="ar"] .force-ltr-inline {
      direction: ltr;
      unicode-bidi: isolate;
  }

  html[lang="ar"] .phone-ltr {
      direction: ltr;
      unicode-bidi: plaintext;
      text-align: left;
  }

  /* Force phone-number-like patterns to LTR in RTL context */
  html[lang="ar"] input[name="to"],
  /* Phone number & BIDI input isolation in Arabic RTL */
  html[lang="ar"] input[name="phone"],
  html[lang="ar"] input[type="tel"],
  html[lang="ar"] .phone-input,
  html[lang="ar"] .phone-ltr,
  html[lang="ar"] bdi,
  html[dir="rtl"] .phone-ltr,
  html[dir="rtl"] .phone-number,
  html[dir="rtl"] .phone-input,
  html[dir="rtl"] bdi,
  .phone-ltr,
  .phone-number,
  bdi[dir="ltr"] {
      direction: ltr !important;
      unicode-bidi: isolate !important;
      text-align: left !important;
      display: inline-block;
  }

  /* Phone number hrefs (whatsapp links) always LTR */
  html[lang="ar"] a[href^="https://wa.me/"],
  html[lang="ar"] a[href^="https://api.whatsapp.com/"],
  html[dir="rtl"] a[href^="https://wa.me/"],
  html[dir="rtl"] a[href^="https://api.whatsapp.com/"] {
      direction: ltr !important;
      unicode-bidi: isolate !important;
  }

  /* ==========================================================================
     5. Button Conformance & Theme Aliases
     ========================================================================== */
  .btn-outline-primary {
      border: 1px solid var(--primary-600) !important;
      color: var(--primary-600) !important;
      background-color: transparent !important;
  }
  .btn-outline-primary:hover {
      background-color: var(--primary-600) !important;
      color: #ffffff !important;
  }
  .btn-primary {
      background-color: var(--primary-600) !important;
      border-color: var(--primary-600) !important;
      color: #ffffff !important;
  }
  .btn-primary:hover {
      background-color: var(--primary-700) !important;
      border-color: var(--primary-700) !important;
      color: #ffffff !important;
  }

  /* ==========================================================================
     6. Icon Prefix Optical & Vertical Alignment
     ========================================================================== */
  iconify-icon {
      display: inline-block;
      vertical-align: middle;
  }

  .btn iconify-icon,
  .badge iconify-icon,
  .dropdown-item iconify-icon,
  .card-header iconify-icon,
  .nav-link iconify-icon,
  .valign-middle {
      vertical-align: middle !important;
  }