/* ==========================================================================
   BlueNex Design System & Custom Stylesheet
   Theme: Bright, Sharp Engineering / Technical Light Mode
   ========================================================================== */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Geist+Mono:wght@300;400;500;600;700&display=swap');

/* --- Custom Variables & Tokens --- */
:root {
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --font-arabic: 'Cairo', sans-serif;
}

/* --- Base Reset & Scroll behavior --- */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: #fcf9f8;
  color: #1c1b1b;
  overflow-x: hidden;
}

/* --- Technical Engineering Grid Patterns --- */
.tech-grid-pattern {
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-image:
    linear-gradient(to right, rgba(28, 0, 124, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 0, 124, 0.035) 1px, transparent 1px),
    linear-gradient(to right, rgba(28, 0, 124, 0.01) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 0, 124, 0.01) 1px, transparent 1px);
  background-position: center center;
}

.technical-grid {
  position: relative;
}

.technical-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
  background-image:
    linear-gradient(to right, rgba(28, 0, 124, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 0, 124, 0.035) 1px, transparent 1px),
    linear-gradient(to right, rgba(28, 0, 124, 0.01) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28, 0, 124, 0.01) 1px, transparent 1px);
  background-position: center center;
  mask-image: radial-gradient(circle, black 40%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle, black 40%, transparent 85%);
  pointer-events: none;
  z-index: 0;
}

/* --- Fine Tech Grid details for Quotes --- */
.quote-grid-pattern {
  background-size: 20px 20px;
  background-image: 
    radial-gradient(circle, rgba(28, 0, 124, 0.1) 1px, transparent 1px);
}

/* --- Mono Text labels --- */
.font-mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.font-mono-data {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.01em;
}

/* --- Card Hover Micro-Animations --- */
.card-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px -10px rgba(28, 0, 124, 0.08);
}

/* --- File Upload Drag & Drop Styling --- */
#uploadZone.dragover {
  border-color: #1c007c;
  background-color: rgba(28, 0, 124, 0.03);
}

/* --- Mobile Drawer Drawer Transition Helpers --- */
#mobileDrawer {
  transition: opacity 0.3s ease;
}

#mobileDrawerContent {
  transition: transform 0.3s ease;
}

/* --- ScrollSpy Header Scrolled Style --- */
header.scrolled {
  box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   Arabic RTL & Typography Styling Overrides
   ========================================================================== */
[dir="rtl"] {
  font-family: var(--font-arabic);
}

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button,
[dir="rtl"] a,
[dir="rtl"] span,
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--font-arabic) !important;
}

/* Alignments & Mirroring */
[dir="rtl"] {
  text-align: right;
}

[dir="rtl"] .text-left {
  text-align: right !important;
}

[dir="rtl"] .text-right {
  text-align: left !important;
}

[dir="rtl"] .ml-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

[dir="rtl"] .mr-auto {
  margin-right: 0 !important;
  margin-left: auto !important;
}

[dir="rtl"] .border-r {
  border-right-width: 0px !important;
  border-left-width: 1px !important;
}

[dir="rtl"] .border-l {
  border-left-width: 0px !important;
  border-right-width: 1px !important;
}

[dir="rtl"] .border-l-2 {
  border-left-width: 0px !important;
  border-right-width: 2px !important;
}

[dir="rtl"] .border-l-4 {
  border-left-width: 0px !important;
  border-right-width: 4px !important;
}

/* Navigation Overrides */
[dir="rtl"] .nav-tab-mobile.active {
  border-left-width: 0px !important;
  border-right-width: 4px !important;
  padding-left: 0px !important;
  padding-right: 0.75rem !important;
}

/* Search Box Placement */
[dir="rtl"] #portfolioSearchInput {
  padding-left: 1rem !important;
  padding-right: 2.5rem !important;
}

[dir="rtl"] .relative > .material-symbols-outlined {
  left: auto !important;
  right: 0.75rem !important;
}

/* Drawer RTL Slider direction */
[dir="ltr"] #mobileDrawerContent {
  left: 0;
  right: auto;
  transform: translateX(-100%);
}

[dir="ltr"].drawer-open #mobileDrawerContent {
  transform: translateX(0);
}

[dir="rtl"] #mobileDrawerContent {
  right: 0;
  left: auto;
  transform: translateX(100%);
}

[dir="rtl"].drawer-open #mobileDrawerContent {
  transform: translateX(0);
}

/* Timeline & Logistics Connection Line Direction */
[dir="rtl"] .timeline-line-offset {
  right: 20px;
  left: auto;
}

[dir="rtl"] .timeline-step-bullet {
  right: 12px;
  left: auto;
}

/* --- Premium Glow & Dashboard styles --- */
.login-card-glow {
  box-shadow: 0 0 50px -5px rgba(28, 0, 124, 0.15);
}

/* --- UX Behavior Heatmap Overlay Styles --- */
#uxHeatmapCanvas {
  pointer-events: none;
  mix-blend-mode: normal;
}

#heatmapControlBar {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
}

#heatmapControlBar.show {
  transform: translate(-50%, 0) !important;
  opacity: 1 !important;
}

#btnLaunchClicks, #btnLaunchHovers {
  transition: all 0.2s ease;
}

#btnLaunchClicks:hover, #btnLaunchHovers:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(28, 0, 124, 0.15);
}