/* ============================================================
   HOUDINI Γö Black & Green Theme (white borders)
   ============================================================ */

:root {
  --color-sky-50: #f0fdf4;  --color-sky-100: #dcfce7;  --color-sky-200: #bbf7d0;
  --color-sky-300: #86efac; --color-sky-400: #4ade80;  --color-sky-500: #22c55e;
  --color-sky-600: #16a34a; --color-sky-700: #15803d;  --color-sky-800: #166534;
  --color-sky-900: #14532d; --color-sky-950: #052e16;

  --color-indigo-50: #f0fdf4;  --color-indigo-100: #dcfce7;  --color-indigo-200: #bbf7d0;
  --color-indigo-300: #86efac; --color-indigo-400: #4ade80;  --color-indigo-500: #22c55e;
  --color-indigo-600: #16a34a; --color-indigo-700: #15803d;  --color-indigo-800: #166534;
  --color-indigo-900: #14532d; --color-indigo-950: #052e16;

  --color-violet-50: #f0fdf4;  --color-violet-100: #dcfce7;  --color-violet-200: #bbf7d0;
  --color-violet-300: #86efac; --color-violet-400: #4ade80;  --color-violet-500: #22c55e;
  --color-violet-600: #16a34a; --color-violet-700: #15803d;  --color-violet-800: #166534;
  --color-violet-900: #14532d; --color-violet-950: #052e16;

  --color-blue-50: #f0fdf4;  --color-blue-100: #dcfce7;  --color-blue-200: #bbf7d0;
  --color-blue-300: #86efac; --color-blue-400: #4ade80;  --color-blue-500: #22c55e;
  --color-blue-600: #16a34a; --color-blue-700: #15803d;  --color-blue-800: #166534;
  --color-blue-900: #14532d; --color-blue-950: #052e16;

  --color-cyan-50: #f0fdf4;  --color-cyan-100: #dcfce7;  --color-cyan-200: #bbf7d0;
  --color-cyan-300: #86efac; --color-cyan-400: #4ade80;  --color-cyan-500: #22c55e;
  --color-cyan-600: #16a34a; --color-cyan-700: #15803d;  --color-cyan-800: #166534;
  --color-cyan-900: #14532d; --color-cyan-950: #052e16;

  --color-emerald-50: #f0fdf4;  --color-emerald-100: #dcfce7;  --color-emerald-200: #bbf7d0;
  --color-emerald-300: #86efac; --color-emerald-400: #4ade80;  --color-emerald-500: #22c55e;
  --color-emerald-600: #16a34a; --color-emerald-700: #15803d;  --color-emerald-800: #166534;
  --color-emerald-900: #14532d; --color-emerald-950: #052e16;

  --color-green-50: #f0fdf4;  --color-green-100: #dcfce7;  --color-green-200: #bbf7d0;
  --color-green-300: #86efac; --color-green-400: #4ade80;  --color-green-500: #22c55e;
  --color-green-600: #16a34a; --color-green-700: #15803d;  --color-green-800: #166534;
  --color-green-900: #14532d; --color-green-950: #052e16;

  --color-slate-50: #f0fdf4;  --color-slate-100: #dcfce7;  --color-slate-200: #bbf7d0;
  --color-slate-300: #86efac; --color-slate-400: #4ade80;  --color-slate-500: #22c55e;
  --color-slate-600: #16a34a; --color-slate-700: #15803d;  --color-slate-800: #166534;
  --color-slate-900: #14532d; --color-slate-950: #020617;

  --ui-border-strong: rgba(255, 255, 255, 0.4);
  --ui-ring: rgba(34, 197, 94, 0.28);
}

/* Global typewriter/code font */
* {
  font-family: 'Courier New', Courier, 'Lucida Console', monospace !important;
}

/* Preserve FontAwesome icons */
.fa, .fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fas, .far, .fad {
  font-family: "Font Awesome 6 Free" !important;
}
.fa-brands, .fab {
  font-family: "Font Awesome 6 Brands" !important;
}

/* Page background: black (html), transparent body so matrix canvas shows through */
html {
  background-color: #000000;
}
body {
  background-color: transparent !important;
  color: #e2e8f0 !important;
}

/* Brand text */
.brand, .login-brand, .sb-text, .sb-mobile-brand span, .nav-brand-text {
  color: #22c55e !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* White borders */
.panel, .card, .sb-panel, .modal-panel, .dashboard-card, .login-card, .command-palette-shell, .nav-dd-panel, .dashboard-stat-card, .toast {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Buttons/primary accents green */
.button.primary, .btn-primary, .nav-active, .dashboard-chart-pill, .dashboard-live-dot.is-live {
  background-color: #22c55e !important;
  color: #000000 !important;
  border-color: #22c55e !important;
}

/* Sign-in button: green with semi-circle (pill) corners */
.login-btn {
  background: #22c55e !important;
  background-image: none !important;
  color: #000000 !important;
  border-color: #22c55e !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Links green */
a, .sb-link, .nav-dd-item, .dashboard-stat-value, .dashboard-version-text {
  color: #4ade80;
}
a:hover, .sb-link:hover, .nav-dd-item:hover {
  color: #22c55e;
}

/* Input focus rings green */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.4) !important;
  border-color: #22c55e !important;
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #166534; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #22c55e; }

/* ============================================================
   Login page: matte black, white HOUDINI, green hat, matrix rain
   ============================================================ */
.login-body {
  background: transparent !important;
}

.login-hat {
  color: #22c55e;
  font-size: 2.5rem;
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.7));
  animation: login-hat-float 3s ease-in-out infinite;
}

@keyframes login-hat-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(3deg); }
}

.login-brand,
.login-brand * {
  color: #22c55e !important;
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #22c55e !important;
  text-shadow: 0 0 12px rgba(34, 197, 94, 0.5) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
}

.login-card {
  position: relative;
  z-index: 10;
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(34, 197, 94, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ============================================================
   Global Matrix Background (all pages)
   ============================================================ */
.matrix-bg-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}

body {
  position: relative;
  background-color: transparent !important;
}

/* Keep page content above the matrix */
#top-nav, main, .login-card, .sb-panel, .modal-panel, .card, .panel, .toast {
  position: relative;
  z-index: 1;
}

/* Remove the login page gradient background overlay so the Matrix canvas is visible */
.login-body::before,
.login-body::after {
  display: none !important;
}

/* Optional: dim the floating particles so they don't hide the matrix */
.login-particles .particle {
  opacity: 0.15 !important;
}

/* Sign-in button: green with semi-circle corners */
.login-btn,
.login-card .button.primary,
.login-card button[type="submit"] {
  background: #22c55e !important;
  background-image: none !important;
  color: #000000 !important;
  border-color: #22c55e !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


/* Sidebar collapse: show only icons */
.sb-collapsed .sb-text,
.sb-collapsed .sb-mobile-brand span,
.sb-collapsed .sidebar-footer-text {
  display: none !important;
}
.sb-collapsed .sidebar {
  width: 64px !important;
}
.sb-collapsed .sb-panel {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

/* Force green witch hat icon everywhere */
.header-crown,
.houdini-icon,
.fa-hat-wizard.houdini-icon,
.fa-hat-wizard.header-crown,
.fa-solid.fa-hat-wizard {
  color: #22c55e !important;
  background: transparent !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #22c55e !important;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5)) !important;
}