/**
 * I-GAS ENTERPRISE — "PRESSURE & PURITY" VISUAL IDENTITY THEME
 * Concept: P&ID engineering drawings + cryogenic frost + safety-signage discipline
 * Strictly Zero Box-Shadows. Depth via hairlines, tonal surfaces, and engineering grids.
 */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=Oxanium:wght@500;600;700;800&family=Tajawal:wght@300;400;500;700;800;900&display=swap");

/* ==========================================================================
   1. COLOR SYSTEM & CSS TOKENS (LIGHT & DARK CONTROL-ROOM MODE)
   ========================================================================== */

:root {
  /* Theme Flag */
  --theme-mode: light;

  /* Brand Palette — Liquid Nitrogen Ink & Engineering Accents */
  --ink: #0A1B26; /* Liquid Nitrogen Ink */
  --ink-deep: #050d13;
  --ink-soft: #162c3d;
  --ink-hover: #0e2230;
  --ink-muted: #64748b;

  --primary: #0B6E8A; /* Cryo Teal */
  --primary-bright: #19B5C9; /* Frost Cyan */
  --primary-soft: #e3f6f9;
  --primary-dark: #084c61;

  --cryo-teal: #0B6E8A;
  --frost-cyan: #19B5C9;
  --safety-orange: #FF6B1A;

  --accent: #FF6B1A; /* Safety Valve Orange */
  --accent-hover: #e55a0e;
  --accent-soft: rgba(255, 107, 26, 0.12);
  --accent-dark: #b34305;

  /* Tonal Surfaces — Clean Precision Lab Scale (Light Mode Default) */
  --surface-0: #F3F7F9; /* Canvas background */
  --surface-1: #ffffff; /* Cards / Containers */
  --surface-2: #e7eef2; /* Sub-panels / Table headers / Input bg */
  --surface-3: #dde6ec; /* Hover states / Active rows */

  /* Hairlines */
  --line: #d3dee5; /* Primary Hairline Border */
  --line-soft: #e2eaf0; /* Subtle Table/Card Divider */
  --line-hard: #b8c7d1; /* Tag & Input Borders */

  --paper: #ffffff;
  --paper-dim: #f3f7f9;
  --paper-deep: #e7eef2;
  --mute: #64748b;
  --mute-soft: #94a3b8;

  /* Focus Outline Indicator */
  --focus: #ff6b1a;

  /* Typography & Content Colors */
  --text-primary: #0a1b26;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-inverse: #ffffff;

  /* Form Control Tokens */
  --input-height: 44px;
  --input-height-compact: 36px;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-border-hover: #94a3b8;
  --input-border-focus: #ff6b1a;
  --input-text: #0a1b26;
  --input-placeholder: #64748b;
  --input-disabled-bg: #f1f5f9;

  /* Global Secondary Status Bar Tokens */
  --status-bar-height: 36px;
  --status-bar-bg: var(--surface-1);
  --status-bar-border: var(--line);
  --status-bar-text: var(--text-secondary);
  --status-bar-text-primary: var(--text-primary);
  --status-bar-text-muted: var(--text-muted);

  /* Industrial Status Scale */
  --status-success: #1fa971; /* Purged / Nominal / OK */
  --status-warning: #f2b01e; /* Caution / Warning */
  --status-danger: #d93636; /* Hazard / Critical Alert */
  --status-info: #2f80ed; /* Technical Notice */

  /* Sidebar Variables (Industrial Dark Command Center) */
  --sidebar: #07131b;
  --sidebar-bg: #07131b;
  --sidebar-surface: #0d1f2b;
  --sidebar-line: #1f3a4a;
  --sidebar-text: #94a3b8;
  --sidebar-text-muted: #556b7a;
  --sidebar-text-active: #19b5c9;
  --sidebar-active-indicator: #ff6b1a;

  /* Gas Cylinder Color Standard */
  --gas-o2: #0066cc;
  --gas-n2: #1f2937;
  --gas-ar: #047857;
  --gas-co2: #6b7280;
  --gas-c2h2: #881337;
  --gas-h2: #dc2626;
  --gas-he: #78350f;
  --gas-air: #374151;
  --gas-lpg: #ea580c;
  --gas-n2o: #2563eb;
}

/* Dark Mode: Deep Industrial Control-Room Navy (Never pure black) */
html.dark,
[data-theme="dark"] {
  --theme-mode: dark;

  --ink: #F1F5F9; /* Liquid Nitrogen Ink in dark mode */
  --ink-deep: #ffffff;
  --ink-soft: #cbd5e1;
  --ink-hover: #ffffff;
  --ink-muted: #94a3b8;

  --primary: #0b6e8a;
  --primary-bright: #19b5c9;
  --primary-soft: #0d2a38;
  --primary-dark: #084c61;

  --cryo-teal: #2dd4bf;
  --frost-cyan: #38bdf8;
  --safety-orange: #ff6b1a;

  --accent: #ff6b1a;
  --accent-hover: #e55a0e;
  --accent-soft: rgba(255, 107, 26, 0.15);
  --accent-dark: #b34305;

  --surface-0: #07131B; /* Deep control-room navy */
  --surface-1: #0d1f2b; /* Instrument Panel Card / Container */
  --surface-2: #14303f; /* Table Headers / Secondary Panel */
  --surface-3: #1b3f54; /* Hover states / Active rows */

  --line: #1f3a4a; /* Primary Hairline Border */
  --line-soft: #182f3d; /* Subtle Table/Card Divider */
  --line-hard: #2d5065; /* Tag & Input Borders */

  --paper: #0d1f2b;
  --paper-dim: #07131b;
  --paper-deep: #050d13;
  --mute: #94a3b8;
  --mute-soft: #64748b;

  --focus: #ff6b1a;

  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #07131b;

  --input-bg: #0a1b26;
  --input-border: #1f3a4a;
  --input-border-hover: #2d5065;
  --input-border-focus: #ff6b1a;
  --input-text: #f1f5f9;
  --input-placeholder: #64748b;
  --input-disabled-bg: #050d13;

  --status-success: #27c283;
  --status-warning: #f5bc38;
  --status-danger: #e64c4c;
  --status-info: #4d96f5;

  --sidebar: #07131b;
  --sidebar-bg: #07131b;
  --sidebar-surface: #0d1f2b;
  --sidebar-line: #1f3a4a;
  --sidebar-text: #94a3b8;
  --sidebar-text-muted: #556b7a;
  --sidebar-text-active: #19b5c9;
  --sidebar-active-indicator: #ff6b1a;
}

/* ==========================================================================
   2. ABSOLUTE ZERO SHADOW SAFETY NET
   ========================================================================== */

*,
*::before,
*::after {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none;
  -webkit-box-shadow: none !important;
}

/* ==========================================================================
   3. TYPOGRAPHY HIERARCHY (TECHNICAL, PRECISE, BILINGUAL)
   ========================================================================== */

body {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  background-color: var(--surface-0);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   PRIMARY ARABIC TYPOGRAPHY STANDARD (TAJAWAL GLOBAL ENFORCEMENT & RTL ZERO-SPACING)
   ========================================================================== */

/* 1. Global Font Binding for Arabic Mode and RTL Direction */
html.arabic-mode,
html[dir="rtl"],
html[lang="ar"],
body.arabic-mode,
[dir="rtl"],
[lang="ar"] {
  font-family:
    "Tajawal",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  letter-spacing: 0 !important;
}

/* 2. Global letter-spacing normalization: Arabic cursive script breaks with positive/negative tracking */
html.arabic-mode *,
html[dir="rtl"] *,
html[lang="ar"] *,
body.arabic-mode *,
[dir="rtl"] *,
[lang="ar"] * {
  letter-spacing: 0 !important;
}

/* 3. Deep Element-Level Enforcement across Headings, Body, Forms, Controls, Tables, Buttons */
html.arabic-mode body,
html[dir="rtl"] body,
html[lang="ar"] body,
body.arabic-mode,
html.arabic-mode h1,
html[dir="rtl"] h1,
html[lang="ar"] h1,
html.arabic-mode h2,
html[dir="rtl"] h2,
html[lang="ar"] h2,
html.arabic-mode h3,
html[dir="rtl"] h3,
html[lang="ar"] h3,
html.arabic-mode h4,
html[dir="rtl"] h4,
html[lang="ar"] h4,
html.arabic-mode h5,
html[dir="rtl"] h5,
html[lang="ar"] h5,
html.arabic-mode h6,
html[dir="rtl"] h6,
html[lang="ar"] h6,
html.arabic-mode p,
html[dir="rtl"] p,
html[lang="ar"] p,
html.arabic-mode a,
html[dir="rtl"] a,
html[lang="ar"] a,
html.arabic-mode label,
html[dir="rtl"] label,
html[lang="ar"] label,
html.arabic-mode input,
html[dir="rtl"] input,
html[lang="ar"] input,
html.arabic-mode select,
html[dir="rtl"] select,
html[lang="ar"] select,
html.arabic-mode textarea,
html[dir="rtl"] textarea,
html[lang="ar"] textarea,
html.arabic-mode button,
html[dir="rtl"] button,
html[lang="ar"] button,
html.arabic-mode table,
html[dir="rtl"] table,
html[lang="ar"] table,
html.arabic-mode th,
html[dir="rtl"] th,
html[lang="ar"] th,
html.arabic-mode td:not(.):not(.mono):not(.num),
html[dir="rtl"] td:not(.):not(.mono):not(.num),
html[lang="ar"] td:not(.):not(.mono):not(.num),
html.arabic-mode .font-sans,
html[dir="rtl"] .font-sans,
html[lang="ar"] .font-sans,
html.arabic-mode .font-display,
html[dir="rtl"] .font-display,
html[lang="ar"] .font-display,
html.arabic-mode .font-oxanium,
html[dir="rtl"] .font-oxanium,
html[lang="ar"] .font-oxanium {
  font-family:
    "Tajawal",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  letter-spacing: 0 !important;
}

/* 4. Font-Weight Calibration for Tajawal in Arabic Mode */
html.arabic-mode .font-semibold,
html[dir="rtl"] .font-semibold,
html[lang="ar"] .font-semibold {
  font-weight: 700 !important;
}

/* 5. Preservation of Monospace Numerical & Telemetry Readouts */
html.arabic-mode .,
html[dir="rtl"] .,
html[lang="ar"] .,
html.arabic-mode .mono,
html[dir="rtl"] .mono,
html[lang="ar"] .mono,
html.arabic-mode .num,
html[dir="rtl"] .num,
html[lang="ar"] .num,
html.arabic-mode code,
html[dir="rtl"] code,
html[lang="ar"] code,
html.arabic-mode kbd,
html[dir="rtl"] kbd,
html[lang="ar"] kbd {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0 !important;
}

.,
.mono {
  font-family: "IBM Plex Mono", monospace;
  font-feature-settings: "tnum" 1;
}

.num {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

/* Technical Instrument Overline */
.section-overline {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

/* Headings Theme Color Binding */
h1,
.page-title {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary) !important;
}

/* ==========================================================================
   4. CENTRALIZED FORM-CONTROL DESIGN SYSTEM (44px STANDARD HEIGHT)
   ========================================================================== */

/* Universal Form Controls Styling */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="url"],
select {
  height: var(--input-height, 44px) !important;
  min-height: var(--input-height, 44px) !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: 0.25rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  padding-block: 0 !important;
  padding-inline: 0.875rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease !important;
}

textarea {
  min-height: 6.5rem !important;
  background-color: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-text) !important;
  border-radius: 0.25rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  padding: 0.75rem 0.875rem !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease !important;
}

/* Compact input variant for inline table edits / dense filters */
input.input-compact,
select.input-compact {
  height: var(--input-height-compact, 36px) !important;
  min-height: var(--input-height-compact, 36px) !important;
  font-size: 0.8125rem !important;
  padding-inline: 0.625rem !important;
}

/* Hover, Focus, and Disabled States */
input:hover:not(:disabled),
select:hover:not(:disabled),
textarea:hover:not(:disabled) {
  border-color: var(--input-border-hover) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus) !important;
  outline: 2px solid var(--focus) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--input-disabled-bg) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* Placeholder Styling */
input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder) !important;
  opacity: 1 !important;
}

/* ==========================================================================
   STANDARDIZED SEARCH INPUTS & SEARCH BARS (44px Height & Logical Clearance)
   ========================================================================== */

.search-box,
.flex-search-box,
div.relative.flex.items-center:has(> [data-lucide="search"]),
div.relative.flex.items-center:has(> svg.lucide-search),
div.relative.flex.items-center:has(> i[data-lucide="search"]),
div.relative.flex.items-center:has(> input[id*="earch"]),
div.relative.flex.items-center:has(> input[id*="Search"]) {
  display: flex !important;
  align-items: center !important;
  height: var(--input-height, 44px) !important;
  min-height: var(--input-height, 44px) !important;
  background-color: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0.375rem !important;
  padding-inline: 0.875rem !important;
  box-shadow: none !important;
  transition:
    border-color 0.15s ease-in-out,
    outline 0.15s ease-in-out !important;
}

.search-box:focus-within,
.flex-search-box:focus-within,
div.relative.flex.items-center:has(> [data-lucide="search"]):focus-within,
div.relative.flex.items-center:has(> svg.lucide-search):focus-within,
div.relative.flex.items-center:has(> i[data-lucide="search"]):focus-within,
div.relative.flex.items-center:has(> input[id*="earch"]):focus-within,
div.relative.flex.items-center:has(> input[id*="Search"]):focus-within {
  border-color: var(--focus, #ff6b1a) !important;
  outline: 2px solid var(--focus, #ff6b1a) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

/* ==========================================================================
   GLOBAL SECONDARY STATUS BAR COMPONENT
   ========================================================================== */

.global-status-bar {
  height: var(--status-bar-height, 36px) !important;
  min-height: var(--status-bar-height, 36px) !important;
  max-height: var(--status-bar-height, 36px) !important;
  background-color: var(--surface-1) !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text-secondary) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.status-bar-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: var(--line) !important;
  flex-shrink: 0;
  box-shadow: none !important;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Search Box Leading Icon */
.search-box > [data-lucide="search"],
.search-box > svg.lucide-search,
.search-box > i[data-lucide="search"],
.flex-search-box > [data-lucide="search"],
.flex-search-box > svg.lucide-search,
.flex-search-box > i[data-lucide="search"],
div.relative.flex.items-center > [data-lucide="search"],
div.relative.flex.items-center > svg.lucide-search,
div.relative.flex.items-center > i[data-lucide="search"] {
  position: static !important;
  transform: none !important;
  width: 1.125rem !important;
  height: 1.125rem !important;
  margin: 0 !important;
  margin-inline-end: 0.75rem !important;
  margin-inline-start: 0 !important;
  color: var(--text-muted, #94a3b8) !important;
  flex-shrink: 0 !important;
  pointer-events: none !important;
}

/* Search Box Inner Input */
.search-box > input,
.flex-search-box > input,
div.relative.flex.items-center:has(> [data-lucide="search"]) > input,
div.relative.flex.items-center:has(> svg.lucide-search) > input,
div.relative.flex.items-center:has(> i[data-lucide="search"]) > input,
div.relative.flex.items-center:has(> input[id*="earch"]) > input,
div.relative.flex.items-center:has(> input[id*="Search"]) > input {
  border: 0 none transparent !important;
  outline: none !important;
  background: transparent !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  padding-inline-start: 0 !important;
  padding-inline-end: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 0.8125rem !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.search-box > input::placeholder,
.flex-search-box > input::placeholder,
div.relative.flex.items-center:has(> [data-lucide="search"])
  > input::placeholder,
div.relative.flex.items-center:has(> svg.lucide-search) > input::placeholder,
div.relative.flex.items-center:has(> i[data-lucide="search"])
  > input::placeholder,
div.relative.flex.items-center:has(> input[id*="earch"]) > input::placeholder,
div.relative.flex.items-center:has(> input[id*="Search"]) > input::placeholder {
  color: var(--input-placeholder, #94a3b8) !important;
  opacity: 1 !important;
}

/* Icon Clearance within Form Controls (Guaranteed Zero Overlap in LTR & RTL) */
.relative:not(.flex):not(.search-box):not(.flex-search-box)
  > input[class*="ps-"],
.relative:not(.flex):not(.search-box):not(.flex-search-box)
  > input[class*="pl-"],
.relative:not(.flex):not(.search-box):not(.flex-search-box)
  > input.has-start-icon,
div.relative:not(.flex):not(.search-box):not(.flex-search-box):has(
    > [data-lucide]
  )
  > input,
div.relative:not(.flex):not(.search-box):not(.flex-search-box):has(> svg.lucide)
  > input {
  padding-inline-start: 2.75rem !important; /* 44px clearance for 16-18px icon at start-3.5 */
}

.relative:not(.flex):not(.search-box):not(.flex-search-box)
  > input[class*="pe-"],
.relative:not(.flex):not(.search-box):not(.flex-search-box)
  > input[class*="pr-"],
.relative:not(.flex):not(.search-box):not(.flex-search-box)
  > input.has-end-icon,
div.relative:not(.flex):not(.search-box):not(.flex-search-box):has(
    > button#toggle_password
  )
  > input,
div.relative:not(.flex):not(.search-box):not(.flex-search-box):has(
    > [id*="toggle"]
  )
  > input {
  padding-inline-end: 2.75rem !important; /* 44px clearance for trailing action */
}

/* Vertically Centered Embedded Icons in Input Fields */
div.relative > span.pointer-events-none:has(> [data-lucide]),
div.relative > span.pointer-events-none:has(> svg.lucide),
div.relative > [data-lucide].absolute,
div.relative > svg.lucide.absolute {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  inset-inline-start: 0.875rem !important;
  z-index: 5 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-muted) !important;
  pointer-events: none !important;
}

/* Password Toggle Action Button Alignment */
button#toggle_password,
button[id*="toggle_pass"],
div.relative > button[type="button"].absolute {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  inset-inline-end: 0.75rem !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0.25rem !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
}

button#toggle_password:hover,
button[id*="toggle_pass"]:hover {
  color: var(--text-primary) !important;
}

/* Browser Autofill Neutralization: Clean readability without yellow/white clash */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--input-text) !important;
  transition:
    background-color 5000000s ease-in-out 0s,
    color 5000000s ease-in-out 0s !important;
  caret-color: var(--input-text) !important;
}

/* Checkbox and Radio Styling */
input[type="checkbox"],
input[type="radio"] {
  height: 1.125rem !important;
  width: 1.125rem !important;
  min-height: 1.125rem !important;
  background-color: var(--input-bg) !important;
  border: 1.5px solid var(--input-border) !important;
  border-radius: 0.25rem !important;
  accent-color: var(--accent) !important;
  cursor: pointer !important;
  padding: 0 !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
}

/* Select Dropdown Arrow Styling */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.875rem center !important;
  background-size: 1rem 1rem !important;
  padding-inline-end: 2.5rem !important;
}

html[dir="rtl"] select,
html.arabic-mode select {
  background-position: left 0.875rem center !important;
}

/* ==========================================================================
   5. SIGNATURE GAS PLANT DETAILS & PATTERNS
   ========================================================================== */

/* Subtle 24px Engineering Blueprint Grid (P&ID canvas) */
.blueprint-grid {
  background-image:
    linear-gradient(to right, rgba(11, 110, 138, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 110, 138, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

html.dark .blueprint-grid,
[data-theme="dark"] .blueprint-grid {
  background-image:
    linear-gradient(to right, rgba(25, 181, 201, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(25, 181, 201, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Engineering Pipeline Section Dividers */
.pipe-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  width: 100%;
  margin: 1.5rem 0;
}

.pipe-divider::before,
.pipe-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--line);
}

.pipe-node {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 2px 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary-bright);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Corner-Notched Cards (Chamfered engineering look) */
.card-notched {
  background: var(--surface-1);
  border: 1px solid var(--line);
  position: relative;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

html[dir="rtl"] .card-notched,
html.arabic-mode .card-notched {
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

/* Card Accent Rules */
.card-accent-rule {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--safety-orange);
  border-radius: 2px;
}

.card-accent-teal {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--primary-bright);
  border-radius: 2px;
}

/* Serial & Instrument Plate Tag */
.tag-plate {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-hard);
  border-radius: 2px;
  color: var(--primary-bright);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}

/* Tank-Fill Progress Level Bar (10% tick marks) */
.level-bar-container {
  position: relative;
  width: 100%;
}

.level-bar-track {
  height: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.level-bar-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s ease;
}

.level-bar-fill.fill-warning {
  background: var(--status-warning);
}

.level-bar-fill.fill-danger {
  background: var(--status-danger);
}

.level-bar-fill.fill-success {
  background: var(--status-success);
}

.level-bar-ticks {
  display: flex;
  justify-content: space-between;
  padding-top: 3px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: var(--text-muted);
}

/* GHS Safety Hazard Diamond Badge */
.ghs-diamond-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ghs-diamond {
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  border: 2.5px solid var(--status-danger);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 6px;
}

.ghs-diamond > * {
  transform: rotate(-45deg);
  color: #1a1a1a;
}

/* Chemical Gas Chips */
.gas-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--surface-1);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.gas-chip-color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

.gas-formula {
  font-family: "Oxanium", "IBM Plex Mono", monospace;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Buttons (Strictly Flat Solid / Technical Outline) */
.btn-cta-orange {
  height: 2.25rem !important;
  background: var(--safety-orange) !important;
  color: #ffffff !important;
  border: 1px solid var(--safety-orange) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  padding: 0.5rem 0.875rem !important;
  border-radius: 0.375rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease !important;
}

.btn-cta-orange:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.btn-secondary {
  height: 2.25rem !important;
  background: var(--surface-2) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--line) !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  padding: 0.5rem 0.875rem !important;
  border-radius: 0.375rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.btn-secondary:hover {
  background: var(--surface-3) !important;
  border-color: var(--line-hard) !important;
  color: var(--text-primary) !important;
}

.btn-teal-outline {
  border: 1px solid var(--primary-bright) !important;
  color: var(--primary-bright) !important;
  background: transparent !important;
  border-radius: 0.375rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}

.btn-teal-outline:hover {
  background: rgba(25, 181, 201, 0.12) !important;
}

/* Table Action Square Icon Buttons */
.btn-action-icon,
.btn-table-action {
  width: 1.875rem !important;
  height: 1.875rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.25rem !important;
  background-color: var(--surface-2) !important;
  border: 1px solid var(--line) !important;
  color: var(--text-secondary) !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
}

.btn-action-icon:hover,
.btn-table-action:hover {
  background-color: rgba(255, 107, 26, 0.15) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.btn-action-icon.btn-danger:hover,
.btn-table-action.btn-danger:hover {
  background-color: rgba(217, 54, 54, 0.15) !important;
  color: var(--status-danger) !important;
  border-color: var(--status-danger) !important;
}

/* KPI Card value styling */
.kpi-num,
[class*="border-l-4"] .text-2xl,
[class*="border-l-4"] .text-3xl,
[class*="border-s-4"] .text-2xl,
[class*="border-s-4"] .text-3xl,
.card-accent-rule .text-2xl,
.card-accent-rule .text-3xl {
  font-size: clamp(1.25rem, 1.8vw, 1.75rem) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;

  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ==========================================================================
   6. LIGHT MODE COMPREHENSIVE OVERRIDE ADAPTER
   Eliminates hardcoded dark Tailwind arbitrary styles in Light Mode
   ========================================================================== */

html:not(.dark) {
  color-scheme: light;
}

html:not(.dark) .bg-\[\#071018\],
html:not(.dark) .bg-\[\#07131b\],
html:not(.dark) .bg-\[\#07131B\],
html:not(.dark) .bg-\[\#060e14\],
html:not(.dark) body.bg-\[\#071018\],
html:not(.dark) main.bg-\[\#071018\] {
  background-color: var(--surface-0) !important;
}

html:not(.dark) .bg-\[\#08131c\],
html:not(.dark) .bg-\[\#07111a\] {
  background-color: var(--surface-1) !important;
}

html:not(.dark) .bg-\[\#0c1924\],
html:not(.dark) .bg-\[\#0d1f2b\],
html:not(.dark) .bg-\[\#0D1F2B\],
html:not(.dark) .bg-\[\#09151f\] {
  background-color: var(--surface-1) !important;
}

html:not(.dark) .bg-\[\#102230\],
html:not(.dark) .bg-\[\#102332\],
html:not(.dark) .bg-\[\#112433\],
html:not(.dark) .bg-\[\#14303f\],
html:not(.dark) .bg-\[\#14303F\],
html:not(.dark) .bg-\[\#152938\],
html:not(.dark) .bg-\[\#132636\],
html:not(.dark) .bg-\[\#173042\],
html:not(.dark) .bg-\[\#152e42\],
html:not(.dark) .bg-\[\#11384b\],
html:not(.dark) .bg-\[\#0f2a3b\],
html:not(.dark) .bg-\[\#0F2A3B\],
html:not(.dark) .bg-\[\#0e2230\],
html:not(.dark) .bg-\[\#0E2230\] {
  background-color: var(--surface-2) !important;
}

/* Light Mode Badge and Indicator Tints */
html:not(.dark) .bg-\[\#0a2618\] {
  background-color: #ecfdf5 !important;
}
html:not(.dark) .bg-\[\#2a0d14\] {
  background-color: #fff1f2 !important;
}
html:not(.dark) .bg-\[\#2a170d\],
html:not(.dark) .bg-\[\#2a1e0d\] {
  background-color: #fffbeb !important;
}
html:not(.dark) .bg-\[\#0d2a38\] {
  background-color: #f0fdfa !important;
}
html:not(.dark) .bg-\[\#1e231b\] {
  background-color: #f8fafc !important;
}

/* Light Mode Hairlines & Borders */
html:not(.dark) .border-\[\#1a3346\],
html:not(.dark) .border-\[\#183042\],
html:not(.dark) .border-\[\#152938\],
html:not(.dark) .border-\[\#152a3a\],
html:not(.dark) .border-\[\#1e3a50\],
html:not(.dark) .border-\[\#162c3d\],
html:not(.dark) .border-\[\#162C3D\],
html:not(.dark) .border-\[\#1f3a4a\],
html:not(.dark) .border-\[\#1F3A4A\],
html:not(.dark) .border-\[\#234257\],
html:not(.dark) .border-\[\#2e5065\],
html:not(.dark) .border-\[\#2E5065\] {
  border-color: var(--line) !important;
}

/* Light Mode Typography Adjustments */
html:not(.dark) .text-white:not(.btn-primary *):not(.btn-primary):not(.btn-cta-orange *):not(
    .btn-cta-orange
  ):not([class*="bg-orange"]):not([class*="bg-emerald"]):not(
    [class*="bg-rose"]
  ):not([class*="bg-blue"]):not([class*="bg-cyan"]):not([class*="bg-red"]):not(
    [class*="bg-amber"]
  ):not([class*="bg-purple"]):not(.badge *):not(.badge):not(.tag *):not(
    [class*="bg-teal"]
  ):not([class*="bg-slate-9"]):not([class*="bg-slate-8"]),
html:not(.dark) .text-slate-100,
html:not(.dark) .text-slate-200 {
  color: var(--text-primary) !important;
}

html:not(.dark) .text-slate-300,
html:not(.dark) .text-slate-400 {
  color: var(--text-secondary) !important;
}

html:not(.dark) .text-slate-500,
html:not(.dark) .text-slate-600 {
  color: var(--text-muted) !important;
}

/* Light Mode Tables */
html:not(.dark) table {
  background-color: var(--surface-1) !important;
}

html:not(.dark) thead tr,
html:not(.dark) thead th {
  background-color: var(--surface-2) !important;
  color: var(--text-secondary) !important;
  border-color: var(--line) !important;
}

html:not(.dark) tbody tr {
  border-color: var(--line-soft) !important;
}

html:not(.dark) tbody tr:hover {
  background-color: var(--surface-3) !important;
}

/* Modal and Dropdown Scrims in Light Mode */
html:not(.dark) .modal-backdrop,
html:not(.dark) #sidebar-overlay {
  background: rgba(10, 27, 38, 0.4) !important;
}