/* === OVERLORD SIMPLE THEME START === */
/* settings: {"accent":"#002912","background":"#000000","surface":"#0f172a","text":"#f1f5f9","corners":"soft"} */
:root {
  --color-sky-50: #ebeeec;
  --color-sky-100: #d1d8d4;
  --color-sky-200: #adbbb3;
  --color-sky-300: #7a9084;
  --color-sky-400: #3d5c4b;
  --color-sky-500: #002912;
  --color-sky-600: #00230f;
  --color-sky-700: #001d0d;
  --color-sky-800: #00170a;
  --color-sky-900: #001108;
  --color-sky-950: #000b05;
  --color-blue-50: #ebeeec;
  --color-blue-100: #d1d8d4;
  --color-blue-200: #adbbb3;
  --color-blue-300: #7a9084;
  --color-blue-400: #3d5c4b;
  --color-blue-500: #002912;
  --color-blue-600: #00230f;
  --color-blue-700: #001d0d;
  --color-blue-800: #00170a;
  --color-blue-900: #001108;
  --color-blue-950: #000b05;
  --color-cyan-50: #ebeeec;
  --color-cyan-100: #d1d8d4;
  --color-cyan-200: #adbbb3;
  --color-cyan-300: #7a9084;
  --color-cyan-400: #3d5c4b;
  --color-cyan-500: #002912;
  --color-cyan-600: #00230f;
  --color-cyan-700: #001d0d;
  --color-cyan-800: #00170a;
  --color-cyan-900: #001108;
  --color-cyan-950: #000b05;
  --color-indigo-50: #ebeeec;
  --color-indigo-100: #d1d8d4;
  --color-indigo-200: #adbbb3;
  --color-indigo-300: #7a9084;
  --color-indigo-400: #3d5c4b;
  --color-indigo-500: #002912;
  --color-indigo-600: #00230f;
  --color-indigo-700: #001d0d;
  --color-indigo-800: #00170a;
  --color-indigo-900: #001108;
  --color-indigo-950: #000b05;
  --color-violet-50: #ebeeec;
  --color-violet-100: #d1d8d4;
  --color-violet-200: #adbbb3;
  --color-violet-300: #7a9084;
  --color-violet-400: #3d5c4b;
  --color-violet-500: #002912;
  --color-violet-600: #00230f;
  --color-violet-700: #001d0d;
  --color-violet-800: #00170a;
  --color-violet-900: #001108;
  --color-violet-950: #000b05;
  --color-purple-50: #ebeeec;
  --color-purple-100: #d1d8d4;
  --color-purple-200: #adbbb3;
  --color-purple-300: #7a9084;
  --color-purple-400: #3d5c4b;
  --color-purple-500: #002912;
  --color-purple-600: #00230f;
  --color-purple-700: #001d0d;
  --color-purple-800: #00170a;
  --color-purple-900: #001108;
  --color-purple-950: #000b05;
  --color-fuchsia-50: #ebeeec;
  --color-fuchsia-100: #d1d8d4;
  --color-fuchsia-200: #adbbb3;
  --color-fuchsia-300: #7a9084;
  --color-fuchsia-400: #3d5c4b;
  --color-fuchsia-500: #002912;
  --color-fuchsia-600: #00230f;
  --color-fuchsia-700: #001d0d;
  --color-fuchsia-800: #00170a;
  --color-fuchsia-900: #001108;
  --color-fuchsia-950: #000b05;
  --color-slate-50: #f6f9fb;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #d1d6dc;
  --color-slate-300: #b2b7bf;
  --color-slate-400: #8b919c;
  --color-slate-500: #69707d;
  --color-slate-600: #4a5160;
  --color-slate-700: #333b4b;
  --color-slate-800: #21293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #000000;
  --color-primary: #002912;
  --color-primary-hover: #3d5c4b;
  --color-text: #f1f5f9;
  --color-text-bright: #f6f9fb;
  --color-text-muted: #8b919c;
  --color-surface: rgba(15, 23, 42, 0.72);
  --color-surface-dark: rgba(0, 0, 0, 0.88);
  --color-border: rgba(241, 245, 249, 0.12);
  --ui-border-strong: rgba(0, 41, 18, 0.45);
  --ui-ring: rgba(0, 41, 18, 0.28);
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl: 18px;
}
html, body {
  background-color: #000000 !important;
  color: #f1f5f9;
}
/* === OVERLORD SIMPLE THEME END === */

/* ============================================================
   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: transparent so matrix canvas shows through everywhere */
html,
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-.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.95;
}

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;
}
/* ============================================================
   Split login layout + code animation card
   ============================================================ */

.login-body {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 40px 24px !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

.login-wrapper {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(360px, 520px);
  gap: 24px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  opacity: 0;
}

@media (max-width: 860px) {
  .login-wrapper {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .login-body {
    align-items: flex-start !important;
    padding-top: 40px !important;
  }
}

/* Login card re-skin */
.login-card {
  width: 100% !important;
  max-width: 420px !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 20px !important;
  padding: 36px 32px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 50px rgba(34, 197, 94, 0.14) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  opacity: 0;
}

.login-card::before {
  display: none !important;
}

.login-card-header {
  margin-bottom: 28px;
  text-align: center;
}

.login-brand-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 24px;
  text-align: center;
  opacity: 0;
}

.login-brand-header .header-crown,
.login-brand-header .fa-hat-wizard {
  font-size: 34px;
  color: #22c55e !important;
  filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.6)) !important;
  -webkit-text-fill-color: #22c55e !important;
}

.login-brand-title {
  font-size: 28px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
  text-shadow: 0 0 20px rgba(34, 197, 94, 0.35);
}


.login-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #22c55e;
  margin-bottom: 8px;
  opacity: 0;
}

.login-title {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
  opacity: 0;
}

.login-card .form-group {
  opacity: 0;
}

.login-card .label {
  color: #94a3b8 !important;
  font-size: 13px;
  margin-bottom: 8px;
}

.login-card .input-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.25s ease;
}

.login-card .input-row:focus-within {
  border-color: #22c55e !important;
  background: rgba(34, 197, 94, 0.06) !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12) !important;
}

.login-card .input-row i {
  color: #64748b !important;
}

.login-card .input-row:focus-within i {
  color: #22c55e !important;
}

.login-card .input-row input {
  color: #f1f5f9 !important;
}

.login-card .input-row input::placeholder {
  color: #475569 !important;
}

.login-btn,
.login-card button[type="submit"] {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: #22c55e !important;
  color: #000000 !important;
  border: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s ease;
  opacity: 0;
}

.login-btn:hover,
.login-card button[type="submit"]:hover {
  background: #2dd56e !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.35);
}

.login-btn .btn-icon {
  transition: transform 0.25s ease;
}

.login-btn:hover .btn-icon {
  transform: translateX(4px);
}

.login-card .error {
  margin-top: 14px;
  text-align: center;
  color: #ef4444;
  font-size: 13px;
}

.login-card .login-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 13px;
  color: #94a3b8;
}

.login-card .login-footer a {
  color: #22c55e;
  text-decoration: none;
}

.login-disclaimer {
  margin-top: 1rem;
  font-size: 0.75rem;
  color: #64748b;
  text-align: center;
  line-height: 1.4;
}

/* Code animation card */
.code-card {
  position: relative;
  z-index: 10;
  width: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.02) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 50px rgba(34, 197, 94, 0.14);
  overflow: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.code-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.45);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.code-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #94a3b8;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}

.code-tab.active {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
}

.code-window-controls {
  display: flex;
  gap: 6px;
}

.code-window-controls span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
}

.control-close {
  background: #ef4444;
}
.control-min {
  background: #eab308;
}
.control-max {
  background: #22c55e;
}

.code-editor {
  flex: 1;
  padding: 16px;
  overflow: auto;
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(5, 10, 20, 0.55);

}

.code-editor pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.code-content {
  display: block;
  color: #e2e8f0;
}

.line-number {
  display: inline-block;
  width: 28px;
  color: #475569;
  text-align: right;
  margin-right: 12px;
  user-select: none;
}

.line-content {
  color: #a5b4fc;
}

.code-content .cursor {
  display: inline-block;
  width: 8px;
  height: 16px;
  background: #22c55e;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.code-output {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.65);

  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}

.code-output.active {
  max-height: 240px;
  opacity: 1;
}

.output-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #22c55e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(34, 197, 94, 0.06);
}

.output-content {
  margin: 0;
  padding: 14px 16px;
  font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 180px;
  overflow: auto;
}

.output-content.error {
  color: #fca5a5;
}

/* ============================================================
   Global fixes: icons, font, neutral glassy cards
   ============================================================ */

/* ── Fix global font to Inter and preserve FontAwesome ── */
* {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.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;
}

/* ── Code elements keep monospace ── */
code, pre, .code-content, .line-number, .line-content, .cv-mono, .cv-tab-num, .command-line, .terminal-line, .log-line {
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace !important;
}

/* ── Sidebar icon colors ── */
.sb-link {
  color: #94a3b8 !important;
}

.sb-link .sb-icon {
  color: inherit !important;
  filter: none !important;
  -webkit-text-fill-color: initial !important;
}

.sb-link .sb-icon[class*="text-"] {
  color: inherit !important;
}

/* Directly target specific icon color classes inside sidebar links */
.sb-link .text-sky-400 { color: #38bdf8 !important; }
.sb-link .text-emerald-400 { color: #34d399 !important; }
.sb-link .text-amber-400 { color: #fbbf24 !important; }
.sb-link .text-indigo-400 { color: #818cf8 !important; }
.sb-link .text-rose-400 { color: #fb7185 !important; }
.sb-link .text-violet-400 { color: #a78bfa !important; }
.sb-link .text-cyan-400 { color: #22d3ee !important; }
.sb-link .text-yellow-400 { color: #facc15 !important; }
.sb-link .text-slate-300 { color: #cbd5e1 !important; }
.sb-link .text-orange-400 { color: #fb923c !important; }
.sb-link .text-fuchsia-400 { color: #e879f9 !important; }

.sb-link:hover .sb-icon[class*="text-"] {
  filter: drop-shadow(0 0 4px currentColor) !important;
}

.sb-link.nav-active .sb-icon[class*="text-"] {
  color: #22c55e !important;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5)) !important;
}

/* ============================================================
   Stronger global glassy cards — covers all pages and variants
   ============================================================ */

/* ── Fix global font to Inter and preserve FontAwesome ── */
* {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.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;
}

code, pre, .code-content, .line-number, .line-content, .cv-mono, .cv-tab-num, .command-line, .terminal-line, .log-line {
  font-family: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace !important;
}

/* ── Sidebar icon colors ── */
.sb-link {
  color: #94a3b8 !important;
}

.sb-link .sb-icon {
  color: inherit !important;
  filter: none !important;
  -webkit-text-fill-color: initial !important;
}

.sb-link .text-sky-400 { color: #38bdf8 !important; }
.sb-link .text-emerald-400 { color: #34d399 !important; }
.sb-link .text-amber-400 { color: #fbbf24 !important; }
.sb-link .text-indigo-400 { color: #818cf8 !important; }
.sb-link .text-rose-400 { color: #fb7185 !important; }
.sb-link .text-violet-400 { color: #a78bfa !important; }
.sb-link .text-cyan-400 { color: #22d3ee !important; }
.sb-link .text-yellow-400 { color: #facc15 !important; }
.sb-link .text-slate-300 { color: #cbd5e1 !important; }
.sb-link .text-orange-400 { color: #fb923c !important; }
.sb-link .text-fuchsia-400 { color: #e879f9 !important; }

.sb-link:hover .sb-icon[class*="text-"] {
  filter: drop-shadow(0 0 4px currentColor) !important;
}

.sb-link.nav-active .sb-icon[class*="text-"] {
  color: #22c55e !important;
  filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.5)) !important;
}

/* ── All slate backgrounds become glassy (cover Tailwind opacity variants) ── */
/* Exclude body/html so the matrix remains fully visible as the page background */
[class*="bg-slate-"]:not(body):not(html),
[class^="bg-slate-"]:not(body):not(html) {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

/* Keep inputs/buttons more compact (avoid full glassy) */
input,
select,
textarea,
button,
[role="button"],
.btn,
.cv-btn,
.cv-btn-primary,
.command-btn,
.file-action-btn,
label[for] {
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

input:hover,
select:hover,
textarea:hover,
button:hover,
.btn:hover,
.cv-btn:hover,
.cv-btn-primary:hover,
.command-btn:hover {
  border-color: rgba(34, 197, 94, 0.4) !important;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.15) !important;
}

button:disabled,
button[disabled] {
  opacity: 0.45 !important;
  border-color: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}

/* ── Cards / panels / modals / toasts ── */
.card,
.panel,
.modal-panel,
.toast,
.alert,
.banner,
.popover,
.dropdown-menu,
.context-menu,
.toolbox,
.drawer,
.widget {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  border-radius: 16px !important;
}

/* ── Details / summary panels ── */
details {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

details summary {
  color: #f8fafc !important;
}

details summary i,
details summary .fa-solid {
  color: #22c55e !important;
}

/* ── Tables ── */
table {
  border-collapse: separate !important;
  border-spacing: 0 6px !important;
}

thead tr {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

thead th {
  color: #94a3b8 !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

tbody tr {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.18s ease !important;
}

tbody tr:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

tbody td {
  color: #e2e8f0 !important;
  border: none !important;
}

tbody td:first-child {
  border-radius: 12px 0 0 12px !important;
}

tbody td:last-child {
  border-radius: 0 12px 12px 0 !important;
}

/* ── Empty state / placeholder boxes ── */
.empty-state,
.empty-state-card,
#dropzone,
.dropzone,
.placeholder-box,
.skeleton-box,
.no-data,
[data-empty="true"] {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #cbd5e1 !important;
}

#dropzone:hover,
.dropzone:hover,
.empty-state:hover {
  border-color: rgba(34, 197, 94, 0.3) !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.1) !important;
}

/* ── File items / grid items / list items ── */
.file-item,
.grid-item,
.card-item,
.list-item,
.plugin-item,
.plugin-card,
.build-row,
.profile-row,
.metric-row,
.log-row,
.user-row,
.client-row {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  transition: all 0.18s ease !important;
}

.file-item:hover,
.grid-item:hover,
.card-item:hover,
.list-item:hover,
.plugin-item:hover,
.plugin-card:hover,
.build-row:hover,
.profile-row:hover,
.metric-row:hover,
.log-row:hover,
.user-row:hover,
.client-row:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
}

.file-item.selected,
.grid-item.selected,
.card-item.selected,
.list-item.selected,
.plugin-item.selected,
.plugin-card.selected,
.build-row.selected,
.profile-row.selected,
.metric-row.selected,
.user-row.selected,
.client-row.selected {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  box-shadow: 0 0 24px rgba(34, 197, 94, 0.15) !important;
}

/* ── Pills / badges / chips ── */
.pill,
.badge,
.chip,
.tag,
.kicker,
.status-pill,
.cv-pill,
.cv-group-cell .cv-pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: #e2e8f0 !important;
  border-radius: 999px !important;
}

.pill:hover,
.badge:hover,
.chip:hover,
.tag:hover,
.kicker:hover {
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ── Dashboard / clients specific neutralization ── */
.dashboard-stat-card,
.dashboard-chart-card,
.dashboard-health-card,
.cv-row,
#grid.clients-grid .cv-row,
#grid.clients-grid[data-layout="rows"] .cv-row,
#grid.clients-grid[data-layout="table"] .cv-row,
#grid.clients-grid[data-layout="cards"] .cv-row {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dashboard-stat-card:hover,
.dashboard-chart-card:hover,
.dashboard-health-card:hover,
.cv-row:hover,
#grid.clients-grid .cv-row:hover,
#grid.clients-grid[data-layout="rows"] .cv-row:hover,
#grid.clients-grid[data-layout="table"] .cv-row:hover,
#grid.clients-grid[data-layout="cards"] .cv-row:hover {
  border-color: rgba(34, 197, 94, 0.3) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(34, 197, 94, 0.12) !important;
}

.dashboard-stat-card--online,
.dashboard-stat-card--sessions,
.dashboard-stat-card--alerts,
.dashboard-stat-card--offline {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dashboard-stat-card--online .dashboard-stat-value,
.dashboard-stat-card--sessions .dashboard-stat-value,
.dashboard-stat-card--alerts .dashboard-stat-value,
.dashboard-stat-card--offline .dashboard-stat-value {
  color: #f8fafc !important;
  text-shadow: 0 0 20px rgba(248, 250, 252, 0.15) !important;
}

.dashboard-stat-topline .dashboard-live-dot.is-live {
  background: #22c55e !important;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15), 0 0 16px rgba(34, 197, 94, 0.4) !important;
}

.dashboard-chart-pill,
.dashboard-health-pill {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}

.cv-row .cv-actions .cv-btn-primary,
.cv-row .cv-actions .command-btn,
.cv-row .cv-actions .cv-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}

.cv-row .cv-actions .cv-btn-primary:hover,
.cv-row .cv-actions .command-btn:hover,
.cv-row .cv-actions .cv-btn:hover {
  background: rgba(34, 197, 94, 0.18) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  color: #22c55e !important;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.22) !important;
}

/* ── Matrix canvas styling ── */
.matrix-bg-canvas,
#matrix-bg-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  opacity: 0.95 !important;
  z-index: -1 !important;
}

/* ── Scrollbars ── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.01);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 197, 94, 0.4);
}


/* Fix select dropdown options: ensure dark background with light text */
select option,
select optgroup,
select option:checked,
select option:focus,
select option:hover {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  text-shadow: none !important;
}