/* ==============================================================================
   APP OMEGA — Obsidian Cybernetic Precision Style
   Design Tokens & Animations
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  --color-surface: #0f131d;
  --color-surface-dim: #0f131d;
  --color-surface-bright: #353944;
  --color-surface-lowest: #0a0e18;
  --color-surface-low: #171b26;
  --color-surface-container: #1c1f2a;
  --color-surface-high: #262a35;
  --color-surface-highest: #313540;
  --color-primary: #c0c1ff;
  --color-primary-indigo: #6366f1;
  --color-secondary-cyan: #4cd7f6;
  --color-tertiary-emerald: #4edea3;
  --color-outline: #908fa0;
  --color-outline-variant: #464554;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--color-surface);
  color: #dfe2f1;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: clip;
}

/* RTL Typography & Direction */
[dir="rtl"] {
  font-family: 'Noto Kufi Arabic', 'Inter', sans-serif;
  text-align: right;
}
[dir="rtl"] .lang-ar {
  font-family: 'Noto Kufi Arabic', 'Inter', sans-serif;
}
[dir="rtl"] code, [dir="rtl"] pre {
  direction: ltr;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
}
[dir="rtl"] [dir="ltr"] {
  direction: ltr;
  text-align: left;
}
[dir="rtl"] .lang-ar {
  display: revert;
}
[dir="rtl"] span.lang-ar {
  display: inline;
}
[dir="rtl"] div.lang-ar, [dir="rtl"] p.lang-ar, [dir="rtl"] h1.lang-ar, [dir="rtl"] h2.lang-ar, [dir="rtl"] h3.lang-ar {
  display: block;
}
[dir="rtl"] .lang-fr {
  display: none !important;
}
[dir="ltr"] .lang-ar {
  display: none !important;
}
[dir="ltr"] .lang-fr {
  display: revert;
}
[dir="ltr"] span.lang-fr {
  display: inline;
}
[dir="ltr"] div.lang-fr, [dir="ltr"] p.lang-fr, [dir="ltr"] h1.lang-fr, [dir="ltr"] h2.lang-fr, [dir="ltr"] h3.lang-fr {
  display: block;
}

/* Material Symbols sizing */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* Obsidian Glassmorphism */
.glass-panel {
  background: rgba(17, 24, 39, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-panel-elevated {
  background: rgba(30, 41, 59, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(99, 102, 241, 0.22);
  box-shadow: 0 0 25px -5px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Glowing Edges & Ambient Halos */
.glow-primary {
  box-shadow: 0 0 24px -4px rgba(99, 102, 241, 0.4);
}
.glow-cyan {
  box-shadow: 0 0 20px -3px rgba(76, 215, 246, 0.35);
}
.glow-emerald {
  box-shadow: 0 0 20px -3px rgba(78, 222, 163, 0.35);
}

/* Cybernetic Grid Background */
.cyber-grid {
  background-size: 40px 40px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0f131d;
}
::-webkit-scrollbar-thumb {
  background: #262a35;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #6366f1;
}

/* Pulse animation for telemetry dots */
@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 0.2; }
  100% { transform: scale(0.95); opacity: 0.8; }
}
.animate-pulse-ring {
  animation: pulse-ring 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==============================================================================
   Logo & Brand Alignment Standards
   Ensures consistent, crisp aspect-ratio and harmonious alignment with titles
   ============================================================================== */
.brand-logo-img {
  object-fit: contain !important;
  width: auto !important;
  max-width: 100% !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Header standard logo sizes */
.header-logo {
  height: 60px !important;
  max-height: 62px !important;
  max-width: 200px !important;
}
@media (min-width: 640px) {
  .header-logo {
    height: 62px !important;
    max-height: 62px !important;
    max-width: 220px !important;
  }
}

/* Sidebar / Drawer standard logo sizes */
.sidebar-logo {
  height: 40px !important;
  max-height: 42px !important;
  max-width: 100px !important;
}

/* Footer standard logo sizes */
.footer-logo {
  height: 60px !important;
  max-height: 62px !important;
  max-width: 220px !important;
}

/* Brand text lockup */
.brand-text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.2;
  margin-inline-start: -0.25rem;
}

.brand-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hero Availability Badge - Mobile single line */
@media (max-width: 640px) {
  .bg-surface-container-high.rounded-full {
    white-space: nowrap !important;
    font-size: clamp(8.5px, 2.6vw, 11px) !important;
    gap: 0.35rem !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    max-width: 100% !important;
    letter-spacing: -0.02em !important;
  }
  .bg-surface-container-high.rounded-full span {
    white-space: nowrap !important;
  }
}

/* ==============================================================================
   Back to Top Floating Button (Obsidian Cybernetic Precision)
   ============================================================================== */
.back-to-top {
  position: fixed;
  bottom: 24px;
  inset-inline-end: 24px;
  z-index: 45;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(28, 31, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c0c1ff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px) scale(0.9);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease,
              color 0.25s ease;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  background: rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.6);
  color: #ffffff;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.35), 0 0 20px rgba(99, 102, 241, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.back-to-top:active {
  transform: translateY(0) scale(0.96);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.back-to-top:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 3px;
}

.back-to-top .material-symbols-outlined {
  font-size: 24px;
  line-height: 1;
  transition: transform 0.25s ease;
}

.back-to-top:hover .material-symbols-outlined {
  transform: translateY(-2px);
}

/* Responsive optimization for mobile devices */
@media (max-width: 640px) {
  .back-to-top {
    bottom: 20px;
    inset-inline-end: 16px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .back-to-top .material-symbols-outlined {
    font-size: 22px;
  }
}

/* Safe footer clearance to prevent back-to-top button overlap */
footer .border-t {
  padding-bottom: 2rem;
}
@media (max-width: 768px) {
  footer .border-t {
    padding-bottom: 4.5rem;
  }
}

/* ==============================================================================
   Admin Backoffice Fixed Layout & Navigation Precision
   ============================================================================== */

/* Base Sidebar Transitions & Fixed Positioning */
.admin-sidebar {
  width: 16rem; /* 256px default */
  height: 100vh;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  inset-inline-start: 0 !important;
  z-index: 40;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: width;
}

/* Main Viewport Offset to account for fixed sidebar on desktop */
@media (min-width: 768px) {
  .admin-main-viewport {
    margin-inline-start: 16rem;
    width: calc(100% - 16rem);
    min-width: 0;
    transition: margin-inline-start 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  html.sidebar-collapsed .admin-main-viewport {
    margin-inline-start: 4.75rem;
    width: calc(100% - 4.75rem);
  }
}

@media (max-width: 767.98px) {
  .admin-main-viewport {
    margin-inline-start: 0;
    width: 100%;
  }
}

/* Fixed Admin Header */
.admin-header {
  position: fixed !important;
  top: 0 !important;
  inset-inline-end: 0 !important;
  inset-inline-start: 0 !important;
  height: 5rem; /* 80px */
  z-index: 30;
  background-color: rgba(15, 19, 29, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: inset-inline-start 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  .admin-header {
    inset-inline-start: 16rem !important;
    width: calc(100% - 16rem) !important;
  }

  html.sidebar-collapsed .admin-header {
    inset-inline-start: 4.75rem !important;
    width: calc(100% - 4.75rem) !important;
  }
}

@media (max-width: 767.98px) {
  .admin-header {
    inset-inline-start: 0 !important;
    width: 100% !important;
  }
}

/* Header Spacer to ensure page content starts properly below fixed header */
.admin-header-spacer {
  height: 5rem; /* 80px */
  flex-shrink: 0;
  display: block;
}

.admin-sidebar .sidebar-text,
.admin-sidebar .brand-text-container {
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.admin-sidebar .sidebar-nav-item {
  transition: padding 0.25s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.admin-sidebar .sidebar-toggle-icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Collapsed State */
html.sidebar-collapsed .admin-sidebar {
  width: 4.75rem !important; /* ~76px for comfortable icon spacing */
}

html.sidebar-collapsed .admin-sidebar .sidebar-text,
html.sidebar-collapsed .admin-sidebar .brand-text-container {
  display: none !important;
  opacity: 0 !important;
  max-width: 0 !important;
  pointer-events: none !important;
}

/* Header in Collapsed State */
html.sidebar-collapsed .admin-sidebar .sidebar-header {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  justify-content: center !important;
}

html.sidebar-collapsed .admin-sidebar .sidebar-brand-link {
  display: none !important;
}

html.sidebar-collapsed .admin-sidebar .sidebar-toggle-btn {
  margin: 0 auto !important;
  display: flex !important;
}

/* Navigation links in Collapsed State */
html.sidebar-collapsed .admin-sidebar .sidebar-nav {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

html.sidebar-collapsed .admin-sidebar .sidebar-nav-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
  width: 100% !important;
}

html.sidebar-collapsed .admin-sidebar .sidebar-nav-icon {
  margin: 0 auto !important;
  font-size: 1.25rem !important;
}

/* Footer in Collapsed State */
html.sidebar-collapsed .admin-sidebar .sidebar-footer {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

html.sidebar-collapsed .admin-sidebar .sidebar-footer-link {
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;
  gap: 0 !important;
}

html.sidebar-collapsed .admin-sidebar .sidebar-user-block {
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.625rem !important;
  padding-top: 0.25rem !important;
}

html.sidebar-collapsed .admin-sidebar .sidebar-user-link {
  justify-content: center !important;
}

/* Icon rotation in Collapsed State & RTL */
[dir="rtl"] .admin-sidebar .sidebar-toggle-icon {
  transform: rotate(180deg);
}

html.sidebar-collapsed .admin-sidebar .sidebar-toggle-icon {
  transform: rotate(180deg);
}

[dir="rtl"] html.sidebar-collapsed .admin-sidebar .sidebar-toggle-icon {
  transform: rotate(0deg);
}

/* Floating Tooltips when collapsed */
.sidebar-floating-tooltip {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  inset-inline-start: 100%;
  background: rgba(28, 31, 42, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #dfe2f1;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6), 0 0 15px rgba(99, 102, 241, 0.2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 100;
}

[dir="rtl"] .sidebar-floating-tooltip {
  transform: translateY(-50%) translateX(-10px);
}

/* Triangle Pointer for Tooltip */
.sidebar-floating-tooltip::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: -5px;
  transform: translateY(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: rgba(28, 31, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}

html.sidebar-collapsed .admin-sidebar .sidebar-nav-item:hover .sidebar-floating-tooltip,
html.sidebar-collapsed .admin-sidebar .sidebar-footer-link:hover .sidebar-floating-tooltip,
html.sidebar-collapsed .admin-sidebar .sidebar-user-link:hover .sidebar-floating-tooltip,
html.sidebar-collapsed .admin-sidebar .sidebar-logout-btn:hover .sidebar-floating-tooltip,
html.sidebar-collapsed .admin-sidebar .sidebar-toggle-btn:hover .sidebar-floating-tooltip {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(14px);
}

[dir="rtl"] html.sidebar-collapsed .admin-sidebar .sidebar-nav-item:hover .sidebar-floating-tooltip,
[dir="rtl"] html.sidebar-collapsed .admin-sidebar .sidebar-footer-link:hover .sidebar-floating-tooltip,
[dir="rtl"] html.sidebar-collapsed .admin-sidebar .sidebar-user-link:hover .sidebar-floating-tooltip,
[dir="rtl"] html.sidebar-collapsed .admin-sidebar .sidebar-logout-btn:hover .sidebar-floating-tooltip,
[dir="rtl"] html.sidebar-collapsed .admin-sidebar .sidebar-toggle-btn:hover .sidebar-floating-tooltip {
  transform: translateY(-50%) translateX(-14px);
}