/* ============================================================
   BATMAN THEME — Clean Dashboard + Login Overrides
   Targeted visual modifications only. No functional changes.
   ============================================================ */

/* ============================================================
   1. BASE — Force pure black
   ============================================================ */
:root, html, body {
  background-color: #050505 !important;
  color: #f2f2f2 !important;
  color-scheme: dark !important;
}

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

/* ============================================================
   2. LOGIN PAGE — Centered layout
   ============================================================ */
#root > div.min-h-screen,
div.min-h-screen.bg-[\\#030612] {
  background-color: #050505 !important;
  background-image: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}

div.min-h-screen > div.absolute,
div.min-h-screen.bg-[\\#030612] > div.absolute {
  display: none !important;
}

div.min-h-screen > div.max-w-md,
div.min-h-screen.bg-[\\#030612] > div.max-w-md {
  max-width: 420px !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px 44px !important;
  margin: auto !important;
  position: relative !important;
  z-index: 10 !important;
  background-color: transparent !important;
  border-left: none !important;
  overflow-y: auto !important;
}

.batman-brand {
  text-align: center;
  margin-bottom: 28px;
  z-index: 1;
}

.batman-brand-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}

.batman-brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.batman-brand-name {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 10px;
  text-transform: uppercase;
  color: #f2f2f2;
  user-select: none;
  margin-bottom: 4px;
  line-height: 1;
}

.batman-brand-subtitle {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #5a5a5a;
}

/* Login card */
div.min-h-screen .backdrop-blur-md,
div.min-h-screen > div.max-w-md > div:last-child {
  background-color: #0d0d0d !important;
  background: #0d0d0d !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 6px !important;
  backdrop-filter: none !important;
}

div.min-h-screen .border-t-2.border-l-2,
div.min-h-screen .border-t-2.border-r-2,
div.min-h-screen .border-b-2.border-l-2,
div.min-h-screen .border-b-2.border-r-2 {
  display: none !important;
}

div.min-h-screen input[type="text"],
div.min-h-screen input[type="password"] {
  background-color: #111111 !important;
  border-color: #222222 !important;
  color: #f2f2f2 !important;
  border-radius: 4px !important;
}

div.min-h-screen input:focus {
  border-color: #444444 !important;
  background-color: #151515 !important;
  outline: none !important;
  box-shadow: none !important;
}

div.min-h-screen label {
  font-family: 'Courier New', monospace !important;
  font-size: 10px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #5a5a5a !important;
}

div.min-h-screen button[type="submit"] {
  background: linear-gradient(180deg, #141414 0%, #0e0e0e 100%) !important;
  border: 1px solid #222222 !important;
  border-radius: 4px !important;
  color: #b0b0b0 !important;
  font-family: 'Courier New', monospace !important;
  font-size: 11px !important;
  letter-spacing: 5px !important;
  text-transform: uppercase !important;
}

div.min-h-screen button[type="submit"]:hover {
  background: linear-gradient(180deg, #1a1a1a 0%, #131313 100%) !important;
  border-color: #444444 !important;
  color: #f2f2f2 !important;
}

.batman-footer {
  margin-top: 24px;
  font-family: 'Courier New', monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: #3a3a3a;
  text-align: center;
  text-transform: uppercase;
}

/* ============================================================
   3. DASHBOARD — Remove blue tints and visual noise
   ============================================================ */

/* --- Sidebar: remove blue tint --- */
aside.bg-\\[\\#030712\\],
aside[class*="bg-"][class*="030712"] {
  background-color: #080808 !important;
}

/* Sidebar logo: remove cyan glow */
aside img[style*="drop-shadow"] {
  filter: none !important;
}

/* Sidebar active item: remove blue, use neutral */
aside button[class*="bg-blue-600\\/20"],
aside button[class*="bg-blue-600"] {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* --- Header: remove gradient text, clean up --- */
h1.text-glow-blue,
h1[class*="bg-clip-text"],
h1[class*="bg-gradient-to-r"][class*="from-blue"],
h1[class*="from-blue-400"][class*="to-cyan"] {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #f2f2f2 !important;
  color: #f2f2f2 !important;
  text-shadow: none !important;
}

/* Header logo: remove glow */
header img[style*="drop-shadow"] {
  filter: none !important;
}

/* Header cyan button: make it neutral */
header button[class*="bg-cyan-500\\/10"],
header button[class*="bg-cyan-500"] {
  background-color: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* --- Alerts card: remove grid background and blue tint --- */
div[class*="bg-slate-950\\/40"] {
  background-color: #0a0a0a !important;
  background: #0a0a0a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 8px !important;
}

/* Remove the grid pattern overlay inside alerts card */
div[class*="bg-slate-950\\/40"] > div.absolute {
  display: none !important;
}

/* Alert pulsing dot: keep cyan but reduce intensity */
div[class*="bg-slate-950\\/40"] span[class*="animate-ping"] {
  background-color: #555555 !important;
  opacity: 0.5 !important;
}

div[class*="bg-slate-950\\/40"] span[class*="bg-cyan-500"] {
  background-color: #666666 !important;
}

/* --- Right panel (RADAR DE ALERTAS): remove blue tint --- */
div[class*="bg-\\[\\#070e20\\]"],
div[class*="bg-\\[#070e20\\]"],
div[class*="070e20"] {
  background-color: #0a0a0a !important;
  background: rgba(10, 10, 10, 0.95) !important;
  backdrop-filter: blur(12px) !important;
}

/* --- Table: clean borders --- */
table tr[class*="border-b"] {
  border-color: rgba(255,255,255,0.04) !important;
}

thead tr {
  background-color: #0a0a0a !important;
}

/* Table container */
div[class*="rounded-xl"][class*="border"][class*="bg-\\[\\#030712\\]"] {
  background-color: #080808 !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* --- Online indicator: keep green but subtler --- */
span[class*="bg-emerald-400"][class*="animate-pulse"] {
  background-color: #22c55e !important;
  box-shadow: 0 0 4px rgba(34, 197, 94, 0.3) !important;
}

/* --- Latency badges: keep functional colors --- */
/* Green (fast) - already neutral enough */
span[class*="bg-emerald-500\\/10"] {
  background-color: rgba(34, 197, 94, 0.08) !important;
}

/* Amber (medium) - keep */
span[class*="bg-amber-500\\/10"] {
  background-color: rgba(245, 158, 11, 0.08) !important;
}

/* Orange (slow) - keep */
span[class*="bg-orange-500\\/10"] {
  background-color: rgba(249, 115, 22, 0.08) !important;
}

/* --- Status badges (VNC, SILENT, IDLE): clean up --- */
span[class*="bg-blue-500\\/10"],
span[class*="bg-cyan-500\\/10"] {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

span[class*="bg-amber-500\\/15"],
span[class*="bg-amber-500\\/20"] {
  background-color: rgba(245, 158, 11, 0.1) !important;
}

span[class*="bg-red-500\\/15"],
span[class*="bg-red-500\\/20"] {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

/* --- Remove animated glows that add noise --- */
[class*="animate-pulse-glow"],
[class*="shadow-cyan"],
[class*="shadow-blue"] {
  animation: none !important;
  box-shadow: none !important;
}

/* --- Button hover states: neutral --- */
button[class*="hover\\:from-blue-700"],
button[class*="hover\\:to-cyan-600"] {
  --tw-gradient-from: #1a1a1a !important;
  --tw-gradient-to: #131313 !important;
}

/* --- Mobile bottom nav: clean up --- */
nav[class*="bg-\\[\\#0D0D0D\\]\\/95"],
nav[class*="bg-"][class*="backdrop-blur-lg"] {
  background-color: rgba(10, 10, 10, 0.98) !important;
  border-color: rgba(255,255,255,0.05) !important;
}

/* ============================================================
   4. INLINE STYLE OVERRIDES — Blue/navy backgrounds
   ============================================================ */
[style*="background-color: #0f172a"], [style*="background-color:#0f172a"],
[style*="background-color: #1e293b"], [style*="background-color:#1e293b"],
[style*="background-color: #0f0f1a"], [style*="background-color:#0f0f1a"],
[style*="background-color: #0a1813"], [style*="background-color:#0a1813"],
[style*="background-color: #0e1630"], [style*="background-color:#0e1630"],
[style*="background-color: #080f25"], [style*="background-color:#080f25"],
[style*="background-color: #0a0a15"], [style*="background-color:#0a0a15"],
[style*="background-color: #0c1228"], [style*="background-color:#0c1228"],
[style*="background-color: #0d1117"], [style*="background-color:#0d1117"],
[style*="background-color: #02050c"], [style*="background-color:#02050c"],
[style*="background-color: #1a1a24"], [style*="background-color:#1a1a24"],
[style*="background-color: #1a1a2e"], [style*="background-color:#1a1a2e"],
[style*="background-color: #090f20"], [style*="background-color:#090f20"],
[style*="background-color: #0b1329"], [style*="background-color:#0b1329"],
[style*="background-color: #0b132b"], [style*="background-color:#0b132b"],
[style*="background-color: #111c44"], [style*="background-color:#111c44"],
[style*="background-color: #060b19"], [style*="background-color:#060b19"],
[style*="background-color: #020617"], [style*="background-color:#020617"],
[style*="background-color: #030612"], [style*="background-color:#030612"],
[style*="background-color: #070e20"], [style*="background-color:#070e20"] {
  background-color: #0a0a0a !important;
}

[style*="background-color: #00f0ff"], [style*="background-color:#00f0ff"],
[style*="background-color: #06b6d4"], [style*="background-color:#06b6d4"],
[style*="background-color: #3b82f6"], [style*="background-color:#3b82f6"],
[style*="background-color: #22d3ee"], [style*="background-color:#22d3ee"],
[style*="background-color: #60a5fa"], [style*="background-color:#60a5fa"],
[style*="background-color: #2563eb"], [style*="background-color:#2563eb"],
[style*="background-color: #8b5cf6"], [style*="background-color:#8b5cf6"],
[style*="background-color: #a855f7"], [style*="background-color:#a855f7"],
[style*="background-color: #6366f1"], [style*="background-color:#6366f1"] {
  background-color: #111111 !important;
}

/* Inline blue/cyan text */
[style*="color: #00f0ff"], [style*="color:#00f0ff"],
[style*="color: #06b6d4"], [style*="color:#06b6d4"],
[style*="color: #3b82f6"], [style*="color:#3b82f6"],
[style*="color: #22d3ee"], [style*="color:#22d3ee"],
[style*="color: #60a5fa"], [style*="color:#60a5fa"],
[style*="color: #67e8f9"], [style*="color:#67e8f9"],
[style*="color: #2563eb"], [style*="color:#2563eb"],
[style*="color: #8b5cf6"], [style*="color:#8b5cf6"],
[style*="color: #a855f7"], [style*="color:#a855f7"] {
  color: #E0E0E0 !important;
}

/* Inline blue/cyan borders */
[style*="border-color: #00f0ff"], [style*="border-color:#00f0ff"],
[style*="border-color: #06b6d4"], [style*="border-color:#06b6d4"],
[style*="border-color: #3b82f6"], [style*="border-color:#3b82f6"],
[style*="border-color: #22d3ee"], [style*="border-color:#22d3ee"],
[style*="border-color: #60a5fa"], [style*="border-color:#60a5fa"],
[style*="border-color: #2563eb"], [style*="border-color:#2563eb"],
[style*="border-color: #8b5cf6"], [style*="border-color:#8b5cf6"],
[style*="border-color: #475569"], [style*="border-color:#475569"] {
  border-color: #292929 !important;
}

/* Remove colored glows */
[style*="box-shadow: 0 0"],
[style*="box-shadow:0 0"],
[style*="box-shadow:0px 0px"] {
  box-shadow: none !important;
}

/* ============================================================
   5. TAILWIND GRADIENT OVERRIDES
   ============================================================ */
[class*="from-blue-400"][class*="to-cyan-300"],
[class*="from-blue-400"][class*="to-cyan"],
[class*="from-cyan-400"][class*="to-blue"],
[class*="text-glow-blue"] {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #f2f2f2 !important;
  color: #f2f2f2 !important;
  text-shadow: none !important;
}

/* ============================================================
   6. TAILWIND COLOR OVERRIDES — All families
   ============================================================ */

/* Backgrounds */
[class*="bg-cyan-"], [class*="bg-blue-"],
[class*="bg-indigo-"], [class*="bg-sky-"],
[class*="bg-violet-"], [class*="bg-purple-"],
[class*="bg-fuchsia-"] {
  background-color: #111111 !important;
}

/* Text */
[class*="text-cyan-"], [class*="text-blue-"],
[class*="text-indigo-"], [class*="text-sky-"],
[class*="text-violet-"], [class*="text-purple-"],
[class*="text-fuchsia-"] {
  color: #E0E0E0 !important;
}

/* Borders */
[class*="border-cyan-"], [class*="border-blue-"],
[class*="border-indigo-"], [class*="border-sky-"],
[class*="border-violet-"], [class*="border-purple-"],
[class*="border-fuchsia-"] {
  border-color: #292929 !important;
}

/* Gradients */
[class*="from-cyan-"], [class*="via-cyan-"], [class*="to-cyan-"],
[class*="from-blue-"], [class*="via-blue-"], [class*="to-blue-"],
[class*="from-indigo-"], [class*="via-indigo-"], [class*="to-indigo-"],
[class*="from-sky-"], [class*="via-sky-"], [class*="to-sky-"],
[class*="from-violet-"], [class*="via-violet-"], [class*="to-violet-"],
[class*="from-purple-"], [class*="via-purple-"], [class*="to-purple-"],
[class*="from-fuchsia-"], [class*="via-fuchsia-"], [class*="to-fuchsia-"] {
  --tw-gradient-from: #111111 !important;
  --tw-gradient-via: #111111 !important;
  --tw-gradient-to: #0D0D0D !important;
}

/* Ring/focus */
[class*="ring-cyan-"], [class*="ring-blue-"],
[class*="ring-indigo-"], [class*="ring-sky-"],
[class*="ring-violet-"], [class*="ring-purple-"],
[class*="ring-fuchsia-"] {
  --tw-ring-color: rgba(160, 160, 160, 0.3) !important;
}

/* Shadows */
[class*="shadow-cyan-"], [class*="shadow-blue-"],
[class*="shadow-indigo-"], [class*="shadow-sky-"],
[class*="shadow-violet-"], [class*="shadow-purple-"],
[class*="shadow-fuchsia-"] {
  --tw-shadow-color: rgba(0, 0, 0, 0.15) !important;
  box-shadow: none !important;
}

/* Hover */
[class*="hover\\:bg-cyan-"]:hover, [class*="hover\\:bg-blue-"]:hover,
[class*="hover\\:bg-indigo-"]:hover, [class*="hover\\:bg-sky-"]:hover,
[class*="hover\\:bg-violet-"]:hover, [class*="hover\\:bg-purple-"]:hover,
[class*="hover\\:bg-fuchsia-"]:hover {
  background-color: #1A1A1A !important;
}

[class*="hover\\:text-cyan-"]:hover, [class*="hover\\:text-blue-"]:hover,
[class*="hover\\:text-indigo-"]:hover, [class*="hover\\:text-sky-"]:hover,
[class*="hover\\:text-violet-"]:hover, [class*="hover\\:text-purple-"]:hover,
[class*="hover\\:text-fuchsia-"]:hover {
  color: #E5E5E5 !important;
}

/* ============================================================
   7. GLOBAL FORM/INPUT STYLES
   ============================================================ */
input, select, textarea {
  background-color: #111111 !important;
  border-color: #292929 !important;
  color: #E0E0E0 !important;
}
input::placeholder { color: #707070 !important; }
input:focus { border-color: #A0A0A0 !important; outline: none !important; }

a { color: #A0A0A0 !important; }
a:hover { color: #E0E0E0 !important; }

::-webkit-scrollbar-track { background: #080808 !important; }
::-webkit-scrollbar-thumb { background: #292929 !important; }
::-webkit-scrollbar-thumb:hover { background: #404040 !important; }

/* ============================================================
   8. ADMIN PANEL OVERRIDES
   ============================================================ */
.via-red-900 {
  --tw-gradient-stops: var(--tw-gradient-from), #0D0D0D var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.bg-red-600 { background-color: #1a1a1a !important; }
[class*="hover\:bg-red-700"]:hover { background-color: #222222 !important; }
.text-red-300 { color: #888888 !important; }
[class*="focus\:ring-red-500"]:focus { --tw-ring-color: rgba(160, 160, 160, 0.3) !important; }
[class*="shadow-red-500"] { --tw-shadow-color: rgba(0, 0, 0, 0.3) !important; box-shadow: none !important; }
.bg-red-500\/10 { background-color: rgba(170, 50, 50, 0.12) !important; }

/* ============================================================
   9. CUSTOM COMPONENT CLASSES
   ============================================================ */
.glass-panel, .glass-panel-glow {
  background: rgba(13, 13, 13, 0.9) !important;
  border-color: #252525 !important;
}
.device-card { background-color: #111111 !important; border-color: #252525 !important; }
.device-card-info { background-color: #0D0D0D !important; }
.device-card-title { color: #E0E0E0 !important; }
.vnc-container { border-color: #252525 !important; background-color: #080808 !important; }
.vnc-controls { background-color: #0D0D0D !important; border-color: #252525 !important; }

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  div.min-h-screen > div.max-w-md,
  div.min-h-screen.bg-[\\#030612] > div.max-w-md {
    padding: 24px 20px 32px !important;
  }
  .batman-brand-icon { width: 56px !important; height: 56px !important; }
  .batman-brand-name { font-size: 20px !important; letter-spacing: 6px !important; }
}

@media (max-height: 700px) {
  .batman-brand { margin-bottom: 20px !important; }
  .batman-brand-icon { width: 56px !important; height: 56px !important; }
}