/* ============================================================
   ScrutinyPulse — Next-Gen Tailwind Style Tokens & Glassmorphism
   Theme: High-Tech Cyber Navy, Electric Cobalt & Cyber Cyan
   Architected by Antigravity (Google DeepMind Team)
   ============================================================ */

:root {
  /* HSL Color Mapping */
  --bg-dark:          224 71% 4%;     /* #020617 - Deepest Space Black */
  --bg-card:          222 47% 7%;     /* #081120 - Elevated bento panel bg */
  --bg-elevated:      217 33% 12%;    /* #0f172a - Glowing active card */
  --color-cyan:       180 100% 50%;   /* #22d3ee - Cyber neon cyan glow */
  --color-cobalt:     224 100% 58%;   /* #2563eb - Electric cobalt brand blue */
  --text-primary:     0 0% 100%;      /* Pure bright contrast white */
  --text-secondary:   215 20% 90%;    /* Accessible slate-white copy */
  --text-muted:       215 16% 62%;    /* Readability-compliant slate gray */
}

/* Glassmorphism custom classes */
.glass-panel {
  background: rgba(8, 17, 32, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-panel-elevated {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(34, 211, 238, 0.25);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  box-shadow: 0 25px 60px rgba(34, 211, 238, 0.08);
}

.glass-panel:hover {
  border-color: rgba(34, 211, 238, 0.3);
  box-shadow: 0 25px 60px rgba(34, 211, 238, 0.08);
  transform: translateY(-1px);
}

/* Reusable premium utility border glow styles */
.premium-border {
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.03);
  transition: all 0.3s ease;
}

.premium-border:hover {
  border-color: rgba(34, 211, 238, 0.35) !important;
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.15) !important;
}

/* Focus and border lighting overlays */
.cyan-glow-focus:focus {
  border-color: rgba(34, 211, 238, 0.6) !important;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15) !important;
}

.glow-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.glow-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(37, 99, 235, 0.2) 100%);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: -1;
}

.glow-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 0 25px rgba(34, 211, 238, 0.45);
}

.glow-btn:hover::after {
  opacity: 1;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #020617;
}
::-webkit-scrollbar-thumb {
  background: #081120;
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
::-webkit-scrollbar-thumb:hover {
  background: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
}

/* Animated moving grid background */
.moving-grid-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.007) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.007) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: gridMove 45s linear infinite;
  pointer-events: none;
}

@keyframes gridMove {
  from { background-position: 0 0; }
  to { background-position: 0 1000px; }
}

/* RTL Helpers for Arabic rendering */
html[dir="rtl"] .sidebar-nav-link-active {
  border-left: none;
  border-right: 3px solid #22d3ee;
}
html[dir="rtl"] input, 
html[dir="rtl"] select, 
html[dir="rtl"] textarea {
  text-align: right;
}