:root {
  --bg-space: #070913;
  --bg-space-dark: #04050a;
  --card-glass: rgba(15, 23, 42, 0.65);
  --card-glass-hover: rgba(22, 33, 62, 0.78);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(99, 102, 241, 0.35);
  --glass-highlight: rgba(255, 255, 255, 0.12);
  --glow-cyan: rgba(6, 182, 212, 0.4);
  --glow-indigo: rgba(99, 102, 241, 0.4);
  --glow-violet: rgba(139, 92, 246, 0.4);
  --glow-emerald: rgba(16, 185, 129, 0.4);
  --glow-rose: rgba(244, 63, 94, 0.4);
}

/* Background Atmosphere & Cyber Grid */
body {
  background-color: var(--bg-space);
  color: #f1f5f9;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

.cosmic-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.cosmic-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  opacity: 0.35;
  will-change: transform;
  animation: orbDrift 25s ease-in-out infinite alternate;
}

.cosmic-orb-1 {
  width: 600px;
  height: 600px;
  top: -150px;
  left: -100px;
  background: radial-gradient(circle, #6366f1 0%, transparent 70%);
}

.cosmic-orb-2 {
  width: 500px;
  height: 500px;
  bottom: -100px;
  right: -50px;
  background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
  animation-duration: 30s;
  animation-delay: -5s;
}

.cosmic-orb-3 {
  width: 450px;
  height: 450px;
  top: 40%;
  right: 25%;
  background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
  animation-duration: 22s;
  animation-delay: -10s;
}

.cyber-grid {
  position: fixed;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 1;
}

@keyframes orbDrift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, 60px) scale(1.1); }
  100% { transform: translate(-30px, 30px) scale(0.95); }
}

/* Glassmorphism & Weightless Depth */
.glass-panel {
  background: var(--card-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 var(--glass-highlight);
  border-radius: 16px;
  position: relative;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.glass-panel:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.5),
    0 0 25px rgba(99, 102, 241, 0.15),
    inset 0 1px 0 var(--glass-highlight);
}

/* 3D Perspective Container for Floating Cards */
.perspective-container {
  perspective: 1200px;
}

.card-3d-tilt {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-3d-tilt:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.55),
    0 0 35px rgba(99, 102, 241, 0.2);
}

.tilt-inner-depth {
  transform: translateZ(24px);
  transform-style: preserve-3d;
}

/* Antigravity Idle Floating Levitation */
.levitating {
  animation: levitate 6s ease-in-out infinite;
}

@keyframes levitate {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Status Indicators with Glowing Pulsars */
.pulsar-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
}

.pulsar-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: pulsar 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pulsar-online {
  background-color: #10b981;
  box-shadow: 0 0 12px #10b981;
}
.pulsar-online::after {
  background-color: rgba(16, 185, 129, 0.4);
}

.pulsar-warning {
  background-color: #f59e0b;
  box-shadow: 0 0 12px #f59e0b;
}
.pulsar-warning::after {
  background-color: rgba(245, 158, 11, 0.4);
}

.pulsar-offline {
  background-color: #f43f5e;
  box-shadow: 0 0 12px #f43f5e;
}
.pulsar-offline::after {
  background-color: rgba(244, 63, 94, 0.4);
}

@keyframes pulsar {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* 3D Isometric Topology View */
.isometric-stage {
  perspective: 1600px;
  overflow: hidden;
  min-height: 650px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.4) 0%, transparent 70%);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.isometric-plane {
  position: relative;
  width: 900px;
  height: 600px;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(-30deg);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  background-image: 
    linear-gradient(to right, rgba(99, 102, 241, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.12) 1px, transparent 1px);
  background-size: 50px 50px;
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  border-radius: 24px;
}

.isometric-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(45px);
  transform-style: preserve-3d;
  text-align: center;
}

.isometric-core-node {
  width: 90px;
  height: 90px;
  border-radius: 20px;
  background: linear-gradient(135deg, #4f46e5, #06b6d4);
  box-shadow: 
    0 0 40px rgba(79, 70, 229, 0.8),
    0 15px 30px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: white;
  margin: 0 auto 10px;
  animation: levitate 4s ease-in-out infinite;
}

.isometric-satellite {
  position: absolute;
  transform-style: preserve-3d;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.isometric-satellite:hover {
  transform: translateZ(40px) scale(1.1);
}

.isometric-satellite-card {
  width: 140px;
  padding: 10px 14px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.5);
  color: white;
  text-align: center;
}

.isometric-connection-line {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(79, 70, 229, 0.6), rgba(6, 182, 212, 0.2));
  transform-origin: 0 0;
  pointer-events: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(10, 15, 30, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Modal Dialog 3D Glass Surface */
.glass-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 15, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.glass-modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.glass-modal-content {
  background: rgba(15, 23, 42, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 
    0 35px 80px rgba(0, 0, 0, 0.8),
    0 0 50px rgba(99, 102, 241, 0.25);
  transform: translateY(30px) scale(0.94);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 900px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.glass-modal-backdrop.active .glass-modal-content {
  transform: translateY(0) scale(1);
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card-3d-tilt {
    transform: none !important;
  }
  .levitating {
    animation: none !important;
  }
}

/* ==========================================================
   LIGHT THEME OVERRIDES
   ========================================================== */
html.light {
  --bg-space: #f8fafc;
  --bg-space-dark: #f1f5f9;
  --card-glass: #ffffff;
  --card-glass-hover: #ffffff;
  --glass-border: #e2e8f0;
  --glass-border-hover: #6366f1;
  --glass-highlight: rgba(255, 255, 255, 1);
}

html.light body {
  background-color: #f8fafc;
  color: #0f172a;
}

html.light .cosmic-orb {
  opacity: 0.08;
}

html.light .cyber-grid {
  background-image: 
    linear-gradient(to right, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
}

html.light .glass-panel {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
}

html.light .glass-panel:hover {
  border-color: #818cf8 !important;
  box-shadow: 0 10px 20px -3px rgba(99, 102, 241, 0.12), 0 4px 6px -4px rgba(99, 102, 241, 0.06) !important;
}

/* Typography in light theme */
html.light h1,
html.light h2,
html.light h3,
html.light h4,
html.light h5,
html.light h6 {
  color: #0f172a !important;
}

html.light .text-white {
  color: #0f172a;
}

/* Ensure ALL colored buttons, action pills, badges, and gradients retain crisp white text in light mode */
html.light button.bg-indigo-600,
html.light button.bg-indigo-700,
html.light button.bg-cyan-600,
html.light button.bg-emerald-600,
html.light button.bg-rose-600,
html.light .btn-winget-install,
html.light #btnExecuteUnenroll,
html.light #btnLoginSubmit,
html.light #btnConfirmClearAudit,
html.light #btnSubmitAddPrinter,
html.light #btnSaveGpoPolicy,
html.light #btnExecuteWingetInstall,
html.light #dispatchSubmitBtn,
html.light .bg-indigo-600,
html.light .bg-cyan-600,
html.light .bg-emerald-600,
html.light .bg-rose-600,
html.light [class*="bg-gradient-"] *,
html.light [class*="bg-gradient-"] {
  color: #ffffff !important;
}

/* Active view & category tabs in light mode */
html.light .view-switch-btn.bg-indigo-600\/40,
html.light .display-mode-btn.bg-indigo-600\/40,
html.light .winget-cat-btn.bg-indigo-600\/40 {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  border-color: #4338ca !important;
}

/* Card Action buttons in light mode */
html.light .btn-inspect {
  background-color: #e0e7ff !important;
  color: #3730a3 !important;
  border: 1px solid #c7d2fe !important;
}
html.light .btn-inspect:hover {
  background-color: #4338ca !important;
  color: #ffffff !important;
}

html.light .btn-gpo {
  background-color: #ede9fe !important;
  color: #5b21b6 !important;
  border: 1px solid #ddd6fe !important;
}
html.light .btn-gpo:hover {
  background-color: #6d28d9 !important;
  color: #ffffff !important;
}

html.light .btn-printers {
  background-color: #cffafe !important;
  color: #155e75 !important;
  border: 1px solid #a5f3fc !important;
}
html.light .btn-printers:hover {
  background-color: #0e7490 !important;
  color: #ffffff !important;
}

html.light .btn-dispatch {
  background-color: #e0f2fe !important;
  color: #075985 !important;
  border: 1px solid #bae6fd !important;
}
html.light .btn-dispatch:hover {
  background-color: #0284c7 !important;
  color: #ffffff !important;
}

html.light .btn-delete {
  background-color: #f1f5f9 !important;
  color: #64748b !important;
  border: 1px solid #cbd5e1 !important;
}
html.light .btn-delete:hover {
  background-color: #ffe4e6 !important;
  color: #e11d48 !important;
  border-color: #f43f5e !important;
}

/* Slate text levels */
html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-slate-300 {
  color: #1e293b !important;
}

html.light .text-slate-400 {
  color: #475569 !important;
}

html.light .text-slate-500 {
  color: #64748b !important;
}

/* High-contrast accessible text colors on light background */
html.light .text-cyan-400,
html.light .text-cyan-300,
html.light .text-cyan-200 {
  color: #0e7490 !important;
}

html.light .text-purple-400,
html.light .text-purple-300,
html.light .text-purple-200 {
  color: #7e22ce !important;
}

html.light .text-indigo-400,
html.light .text-indigo-300,
html.light .text-indigo-200 {
  color: #4338ca !important;
}

html.light .text-amber-400,
html.light .text-amber-300 {
  color: #b45309 !important;
}

html.light .text-emerald-400,
html.light .text-emerald-300 {
  color: #047857 !important;
}

html.light .text-rose-400,
html.light .text-rose-300 {
  color: #be123c !important;
}

html.light .bg-slate-900,
html.light .bg-slate-950,
html.light .bg-slate-900\/90,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/70,
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/40 {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-slate-800,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/60 {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Tinted cards contrast in light mode */
html.light .bg-purple-500\/10 {
  background-color: #faf5ff !important;
  border-color: #e9d5ff !important;
}

html.light .bg-indigo-500\/10,
html.light .bg-indigo-500\/20 {
  background-color: #eef2ff !important;
  border-color: #c7d2fe !important;
}

html.light .bg-cyan-500\/10,
html.light .bg-cyan-500\/20 {
  background-color: #ecfeff !important;
  border-color: #a5f3fc !important;
}

html.light .bg-emerald-500\/10,
html.light .bg-emerald-500\/20 {
  background-color: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

html.light .bg-amber-500\/10,
html.light .bg-amber-500\/20 {
  background-color: #fffbeb !important;
  border-color: #fde68a !important;
}

html.light .bg-rose-500\/10,
html.light .bg-rose-500\/20 {
  background-color: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

/* Table styling in light mode */
html.light table thead {
  background-color: #f8fafc !important;
}
html.light table thead th {
  color: #475569 !important;
  border-bottom: 2px solid #e2e8f0 !important;
}
html.light table tbody tr {
  border-bottom: 1px solid #e2e8f0 !important;
}
html.light table tbody tr:hover {
  background-color: #f8fafc !important;
}

html.light code {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html.light input,
html.light select,
html.light textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #94a3b8 !important;
}

html.light .border-white\/5,
html.light .border-white\/10,
html.light .border-white\/20 {
  border-color: #e2e8f0 !important;
}

html.light .glass-modal-backdrop {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(10px) !important;
}

html.light .glass-modal-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.2) !important;
}

/* ==========================================================
   2D TOPOLOGY DIAGRAM STYLES
   ========================================================== */
.topology-canvas-container {
  min-height: 480px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.topology-node-server {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.topology-node-server:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 35px rgba(99, 102, 241, 0.45);
}

.topology-node-host {
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}
.topology-node-host:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(99, 102, 241, 0.7) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.topology-connector-line {
  stroke-dasharray: 4;
  animation: lineFlow 30s linear infinite;
}

@keyframes lineFlow {
  from { stroke-dashoffset: 200; }
  to { stroke-dashoffset: 0; }
}