/* ==========================================================================
   Elysium — Client Panel Theme
   Inspired by OpenCode's terminal-native design language
   Font: JetBrains Mono (Berkeley Mono substitute)
   ========================================================================== */

:root {
  /* --- Core Palette (inverted from the OpenCode light system → dark) --- */
  --oc-canvas:        #121212;
  --oc-canvas-soft:   #181717;
  --oc-canvas-soft-2: #1f1e1e;
  --oc-canvas-raised: #1c1b1b;
  --oc-ink:           #e8e6e3;
  --oc-body:          #a8a6a3;
  --oc-muted:         #7a7878;
  --oc-disabled:      #5a5858;
  --oc-hairline:      rgba(255, 255, 255, 0.08);
  --oc-hairline-md:   rgba(255, 255, 255, 0.12);
  --oc-hairline-lg:   rgba(255, 255, 255, 0.18);

  /* --- Semantic (Apple HIG ramp — from DESIGN.md) --- */
  --oc-accent:        #ef233c;
  --oc-accent-hover:  #ff4d5e;
  --oc-accent-active: #b91c2b;
  --oc-success:       #30d158;
  --oc-success-hover: #34c759;
  --oc-warning:       #ff9f0a;
  --oc-warning-hover: #ffb340;
  --oc-danger:        #ff453a;
  --oc-danger-hover:  #ff6961;
  --oc-info:          #5a9cff;

  /* --- Typography --- */
  --oc-font: 'JetBrains Mono', 'IBM Plex Mono', 'ui-monospace', 'SFMono-Regular',
    'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  --oc-font-size-xs: 11px;
  --oc-font-size-sm: 12px;
  --oc-font-size:    14px;
  --oc-font-size-lg: 16px;
  --oc-font-size-xl: 20px;
  --oc-font-size-2xl: 28px;

  /* --- Radii (OpenCode style: 4px interactive, 0px containers) --- */
  --oc-radius-sm:  4px;
  --oc-radius:     6px;
  --oc-radius-lg:  8px;
  --oc-radius-full: 9999px;

  /* --- Shadows (none — flat, terminal-native design) --- */
  --oc-shadow-sm:  none;
  --oc-shadow-md:  none;
  --oc-shadow-lg:  none;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--oc-canvas);
  color: var(--oc-ink);
  font-family: var(--oc-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 75% 48% at 12% 8%, rgba(168, 85, 247, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 48% 36% at 86% 16%, rgba(255, 69, 58, 0.06) 0%, transparent 62%),
    linear-gradient(180deg, var(--oc-canvas), var(--oc-canvas-soft) 36rem) !important;
  color: var(--oc-body) !important;
  font-family: var(--oc-font) !important;
  line-height: 1.5;
  letter-spacing: 0;
}

/* ==========================================================================
   Typography — 100% monospaced, no proportional faces
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--oc-font) !important;
  color: var(--oc-ink) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.5;
}

h1 { font-size: var(--oc-font-size-2xl); }
h2 { font-size: var(--oc-font-size-xl); }
h3 { font-size: var(--oc-font-size-lg); }
h4 { font-size: var(--oc-font-size); }

p, span, label, li, td, th, div, input, textarea, select, button {
  font-family: var(--oc-font);
  letter-spacing: 0;
}

strong, b {
  font-weight: 500 !important;
}

/* ==========================================================================
   Links — ink-color links with underline, not default blue
   ========================================================================== */

a {
  color: inherit !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

p a,
td a,
.content a,
.alert a,
.box a:not(.btn):not(.label):not(.badge),
.card a:not(.btn):not(.label):not(.badge) {
  color: var(--oc-ink) !important;
}

p a:hover,
td a:hover,
.content a:hover,
.box a:not(.btn):not(.label):not(.badge):hover {
  color: var(--oc-body) !important;
}

/* ==========================================================================
   Selection
   ========================================================================== */

::selection {
  background: rgba(168, 85, 247, 0.25);
  color: var(--oc-ink);
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--oc-hairline-md);
  border-radius: var(--oc-radius-full);
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--oc-hairline-lg);
}

/* ==========================================================================
   Auth Page (elysium-mesh) — Industrial Terminal
   Clean, high-craft monospaced login. No gimmicks.
   The form is a tool, not a decoration.
   ========================================================================== */

@keyframes elysium-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.elysium-mesh {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 100% 60% at 0% 50%, rgba(168, 85, 247, 0.03) 0%, transparent 70%),
    var(--oc-canvas) !important;
}

.elysium-mesh::before {
  content: 'Elysium';
  position: fixed;
  top: 32px;
  left: 12%;
  color: var(--oc-ink);
  font-family: var(--oc-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.elysium-mesh::after {
  content: '[auth] [ready]';
  position: fixed;
  right: 32px;
  bottom: 28px;
  color: var(--oc-disabled);
  font-family: var(--oc-font);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

/* Panel name — quiet, like a tmux status bar */
.elysium-mesh h2 {
  margin: 0 0 32px 0 !important;
  font-family: var(--oc-font) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  color: var(--oc-muted) !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

.elysium-mesh h2::before {
  content: '> ';
  color: var(--oc-accent);
}

/* Form — full width, no container chrome */
.elysium-mesh form {
  position: relative;
  max-width: 380px;
  margin: 0;
  margin-left: 12%;
}

.elysium-mesh form > div,
.elysium-mesh form > .w-full,
.elysium-mesh form > [class*='bg-white'],
.elysium-mesh form > [class*='shadow'] {
  display: block !important;
  width: auto !important;
  max-width: 380px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.elysium-mesh form > div > div:first-child {
  display: none !important;
}

.elysium-mesh form > div > div:last-child {
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* Form body */
.elysium-mesh form > * {
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Labels as terminal prompts */
.elysium-mesh form label,
.elysium-mesh form [class*='label'],
.elysium-mesh form .input-help {
  display: block !important;
  color: var(--oc-muted) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin-bottom: 4px !important;
  font-weight: 400 !important;
}

.elysium-mesh form label::before {
  content: '> ';
  color: var(--oc-accent);
}

.elysium-mesh form .input-help.error {
  color: var(--oc-danger) !important;
}

.elysium-mesh form .input-help.error::before {
  content: '! ';
  color: var(--oc-danger);
}

/* Inputs — minimal, bottom-border only */
.elysium-mesh form input,
.elysium-mesh form textarea,
.elysium-mesh form select {
  height: 40px !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--oc-hairline-md) !important;
  border-radius: 0 !important;
  color: var(--oc-ink) !important;
  font-family: var(--oc-font) !important;
  font-size: var(--oc-font-size);
  width: 100%;
  outline: none;
  box-shadow: none !important;
  transition: border-color 0.15s ease;
}

.elysium-mesh form input:hover {
  border-bottom-color: var(--oc-hairline-lg) !important;
}

.elysium-mesh form input:focus {
  border-bottom-color: var(--oc-accent) !important;
  box-shadow: none !important;
}

/* Submit button */
.elysium-mesh form button[type='submit'],
.elysium-mesh form .btn-primary,
.elysium-mesh form [class*='bg-blue'] {
  height: 40px !important;
  margin-top: 8px !important;
  padding: 0 20px !important;
  background: var(--oc-ink) !important;
  border: 1px solid var(--oc-ink) !important;
  border-radius: 4px !important;
  color: var(--oc-canvas) !important;
  font-family: var(--oc-font) !important;
  font-weight: 500;
  font-size: var(--oc-font-size);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-block;
  width: auto;
}

.elysium-mesh form button[type='submit']:hover {
  background: transparent !important;
  color: var(--oc-ink) !important;
}

/* Password link */
.elysium-mesh form a[href*='password'],
.elysium-mesh form + p a,
.elysium-mesh > p a {
  display: inline-block !important;
  margin-top: 16px !important;
  color: var(--oc-muted) !important;
  text-decoration: none;
  font-size: 12px !important;
}

.elysium-mesh form a[href*='password']:hover {
  color: var(--oc-body) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer links (register, etc) */
.elysium-mesh > p {
  margin: 20px 0 0 12% !important;
  color: var(--oc-disabled) !important;
  font-size: 12px;
  max-width: 380px;
}

.elysium-mesh > p a {
  color: var(--oc-muted) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.elysium-mesh > p a:hover {
  color: var(--oc-ink) !important;
}

/* Blinking cursor — subtle terminal accent */
@keyframes elysium-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.elysium-mesh .elysium-cursor {
  display: inline-block;
  width: 7px;
  height: 15px;
  background: var(--oc-muted);
  margin-left: 4px;
  vertical-align: middle;
  animation: elysium-blink 1s step-end infinite;
}

/* ==========================================================================
   Client Panel (elysium-canvas)
   ========================================================================== */

.elysium-canvas {
  background:
    radial-gradient(ellipse 75% 48% at 12% 8%, rgba(168, 85, 247, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, var(--oc-canvas), var(--oc-canvas-soft) 42rem) !important;
}

/* --- Background overrides for Tailwind utility classes --- */

.bg-gray-900,
.bg-neutral-900,
.bg-slate-900,
.bg-zinc-900,
.bg-white,
.bg-light {
  background-color: var(--oc-canvas-soft) !important;
}

.bg-gray-800,
.bg-neutral-800,
.bg-slate-800,
.bg-zinc-800,
.bg-black {
  background-color: var(--oc-canvas-soft) !important;
}

.bg-gray-700,
.bg-neutral-700,
.bg-slate-700,
.bg-zinc-700,
.bg-gray-600,
.bg-neutral-600,
.bg-gray-500,
.bg-neutral-500,
.bg-slate-500,
.bg-zinc-500,
.bg-gray-400,
.bg-neutral-400,
.bg-gray-300,
.bg-neutral-300,
.bg-gray-200,
.bg-neutral-200 {
  background-color: var(--oc-canvas-soft-2) !important;
}

/* --- Text color overrides --- */

.text-gray-50,
.text-gray-100,
.text-neutral-100,
.text-slate-100,
.text-white {
  color: var(--oc-ink) !important;
}

.text-gray-200,
.text-neutral-200,
.text-slate-200,
.text-gray-300,
.text-neutral-300,
.text-slate-300 {
  color: var(--oc-body) !important;
}

.text-gray-400,
.text-neutral-400,
.text-slate-400,
.text-gray-500,
.text-neutral-500 {
  color: var(--oc-muted) !important;
}

/* --- Border overrides --- */

.border-gray-900,
.border-gray-800,
.border-gray-700,
.border-gray-600,
.border-gray-500,
.border-gray-400,
.border-gray-300,
.border-gray-200,
.border-neutral-700,
.border-neutral-600,
.border-neutral-500,
.border-neutral-400,
.border-neutral-300,
.border-neutral-200,
.border-slate-700,
.border-zinc-700,
.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
  border-color: var(--oc-hairline) !important;
}

/* ==========================================================================
   Navigation Bar (React client)
   ========================================================================== */

div[class*='NavigationBar'],
div[class*='navigation-bar'],
header,
nav,
div[class*='SubNavigation'],
div[class*='sub-navigation'],
div[class*='ServerSubNavigation'],
div[class*='NavigationRouter'],
div[class*='SubNavBar'] {
  background: color-mix(in srgb, var(--oc-canvas) 92%, transparent) !important;
  border-color: var(--oc-hairline) !important;
}

/* ==========================================================================
   Stat Blocks
   ========================================================================== */

div[class*='StatBlock'],
div[class*='ServerDetails'],
div[class*='NetworkStats'],
div[class*='GreyRowBox'],
div[class*='TitledGreyBox'],
.group > div[class*='bg-'],
.grid > div[class*='bg-'] {
  background: var(--oc-canvas-raised) !important;
  color: var(--oc-ink) !important;
  border: 1px solid var(--oc-hairline) !important;
  box-shadow: var(--oc-shadow-sm) !important;
}

.elysium-canvas .grid > div[class*='StatBlock'],
.elysium-canvas .group > div[class*='StatBlock'] {
  background: var(--oc-canvas-raised) !important;
  border-color: var(--oc-hairline) !important;
}

div[class*='StatBlock'] {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--oc-canvas-raised) 92%, var(--oc-canvas-soft-2)) 0%, var(--oc-canvas-raised) 100%) !important;
  border-radius: 0 !important;
}

/* Hairline accent bar at bottom — terminal status-strip detail */
div[class*='StatBlock']::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--oc-accent);
  opacity: 0.6;
}

.elysium-canvas canvas + *,
.elysium-canvas [class*='Chart'] {
  color: var(--oc-body) !important;
}

.elysium-canvas [class*='Chart'] > div,
.elysium-canvas [class*='TitledGreyBox'] > div,
.elysium-canvas [class*='NetworkStats'] > div {
  background: transparent !important;
  border-color: var(--oc-hairline) !important;
}

div[class*='StatBlock'] p,
div[class*='StatBlock'] span {
  color: var(--oc-body) !important;
}

div[class*='StatBlock'] p:first-child {
  color: var(--oc-ink) !important;
  font-weight: 500 !important;
}

div[class*='StatBlock'] svg {
  color: var(--oc-muted) !important;
}

div[class*='StatBlock'] .icon {
  background: var(--oc-canvas-soft-2) !important;
  border: 1px solid var(--oc-hairline) !important;
}

div[class*='StatBlock'] [class*='text-xs'],
div[class*='StatBlock'] [class*='text-sm'] {
  color: var(--oc-muted) !important;
}

div[class*='StatBlock'] [class*='text-red'] {
  color: var(--oc-danger) !important;
}

/* ==========================================================================
   GreyRowBox / TitledGreyBox
   ========================================================================== */

a[class*='GreyRowBox'],
div[class*='GreyRowBox'],
div[class*='TitledGreyBox'] {
  background: linear-gradient(180deg, color-mix(in srgb, var(--oc-canvas-raised) 94%, var(--oc-canvas-soft-2)) 0%, var(--oc-canvas-raised) 100%) !important;
  border-radius: 0 !important;
}

.elysium-canvas a[class*='GreyRowBox'],
.elysium-canvas div[class*='GreyRowBox'],
.elysium-canvas div[class*='TitledGreyBox'] {
  background: var(--oc-canvas-raised) !important;
  border-color: var(--oc-hairline) !important;
  color: var(--oc-body) !important;
}

.elysium-canvas a[class*='GreyRowBox']:hover,
.elysium-canvas div[class*='GreyRowBox']:hover {
  background: var(--oc-canvas-soft-2) !important;
  border-color: var(--oc-hairline-md) !important;
}

.elysium-canvas a[class*='GreyRowBox'] svg,
.elysium-canvas div[class*='GreyRowBox'] svg {
  color: var(--oc-muted) !important;
}

a[class*='GreyRowBox'] .icon,
div[class*='GreyRowBox'] .icon {
  background: var(--oc-canvas-soft-2) !important;
  border: 1px solid var(--oc-hairline) !important;
  color: var(--oc-ink) !important;
}

/* ==========================================================================
   Terminal (Xterm.js)
   ========================================================================== */

.xterm,
.xterm-viewport,
.xterm-screen,
pre,
code[class*='cm-'],
.CodeMirror {
  background: var(--oc-canvas) !important;
  color: var(--oc-ink) !important;
  border-color: var(--oc-hairline) !important;
  font-family: var(--oc-font) !important;
}

.CodeMirror-gutters,
.cm-s-default .CodeMirror-gutters,
.cm-s-material .CodeMirror-gutters {
  background: var(--oc-canvas-soft-2) !important;
  border-right-color: var(--oc-hairline) !important;
}

canvas {
  background: transparent !important;
}

/* ==========================================================================
   Form Controls
   ========================================================================== */

input,
textarea,
select,
.form-control {
  font-family: var(--oc-font) !important;
  background: var(--oc-canvas-raised) !important;
  color: var(--oc-ink) !important;
  border-color: var(--oc-hairline) !important;
  border-radius: var(--oc-radius-sm) !important;
  font-size: var(--oc-font-size);
  padding: 8px 12px;
}

input,
select,
.form-control:not(textarea) {
  height: 36px;
}

textarea {
  height: auto;
  min-height: 80px;
  resize: vertical;
  line-height: 1.5;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--oc-accent) !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.15) !important;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: var(--oc-disabled) !important;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

button:not(.elysium-theme-toggle),
.btn {
  font-family: var(--oc-font) !important;
  font-size: var(--oc-font-size);
  font-weight: 500;
  line-height: 2;
  border-radius: var(--oc-radius-sm);
  transition: background-color 0.1s ease, border-color 0.1s ease;
  cursor: pointer;
}

.btn-primary {
  background: var(--oc-accent) !important;
  border: 1px solid var(--oc-accent) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background: var(--oc-accent-hover) !important;
  border-color: var(--oc-accent-hover) !important;
}

.btn-secondary,
.btn-default {
  background: var(--oc-canvas-soft-2) !important;
  border: 1px solid var(--oc-hairline) !important;
  color: var(--oc-ink) !important;
}

.btn-secondary:hover,
.btn-default:hover {
  background: var(--oc-canvas-raised) !important;
  border-color: var(--oc-hairline-md) !important;
}

.btn-danger {
  background: var(--oc-danger) !important;
  border: 1px solid var(--oc-danger) !important;
  color: #fff !important;
}

.btn-danger:hover {
  background: var(--oc-danger-hover) !important;
}

.btn-warning {
  background: rgba(255, 159, 10, 0.1) !important;
  border: 1px solid rgba(255, 159, 10, 0.2) !important;
  color: var(--oc-warning) !important;
}

.btn-success {
  background: rgba(48, 209, 88, 0.1) !important;
  border: 1px solid rgba(48, 209, 88, 0.2) !important;
  color: var(--oc-success) !important;
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.nav-tabs .nav-link,
.tab {
  font-family: var(--oc-font) !important;
  color: var(--oc-muted) !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent;
  font-size: var(--oc-font-size);
  font-weight: 400;
  letter-spacing: 0;
  transition: color 0.1s ease, border-color 0.1s ease;
}

.nav-tabs .nav-link:hover,
.tab:hover {
  color: var(--oc-body) !important;
}

.nav-tabs .nav-link.active,
.tab.active {
  color: var(--oc-ink) !important;
  border-bottom-color: var(--oc-accent) !important;
}

/* ==========================================================================
   File Manager — CSS-module rows
   ========================================================================== */

.elysium-canvas .style-module_HHpjDvv7 {
  background: var(--oc-canvas-raised) !important;
  background-color: var(--oc-canvas-raised) !important;
  border: 1px solid var(--oc-hairline) !important;
  border-radius: 0 !important;
  color: var(--oc-body) !important;
  margin-bottom: 4px !important;
}

.elysium-canvas .style-module_HHpjDvv7 > .style-module_le7taa7N,
.elysium-canvas .style-module_HHpjDvv7 > .style-module_le7taa7N > * {
  background: transparent !important;
  background-color: transparent !important;
}

.elysium-canvas .style-module_HHpjDvv7 .style-module_le7taa7N,
.elysium-canvas .style-module_HHpjDvv7 .style-module_le7taa7N span,
.elysium-canvas .style-module_HHpjDvv7 .style-module_le7taa7N a {
  color: var(--oc-body) !important;
}

.elysium-canvas .style-module_HHpjDvv7:has(input[type="checkbox"]:checked) {
  background: color-mix(in srgb, var(--oc-accent) 6%, var(--oc-canvas-raised)) !important;
  border-color: color-mix(in srgb, var(--oc-accent) 30%, var(--oc-hairline)) !important;
}

.elysium-canvas .style-module_HHpjDvv7:has(input[type="checkbox"]:checked) .style-module_le7taa7N,
.elysium-canvas .style-module_HHpjDvv7:has(input[type="checkbox"]:checked) .style-module_le7taa7N span,
.elysium-canvas .style-module_HHpjDvv7:has(input[type="checkbox"]:checked) .style-module_le7taa7N a {
  color: var(--oc-ink) !important;
}

.elysium-canvas .style-module_HHpjDvv7:hover:not(:has(input[type="checkbox"]:checked)) {
  background: var(--oc-canvas-soft-2) !important;
  border-color: var(--oc-hairline-md) !important;
  color: var(--oc-ink) !important;
}

.elysium-canvas .style-module_HHpjDvv7 input[type="checkbox"],
.elysium-canvas .style-module_fqm1ZNax input[type="checkbox"] {
  border-color: var(--oc-hairline-md) !important;
  background-color: transparent !important;
}

.elysium-canvas .style-module_HHpjDvv7 input[type="checkbox"]:hover,
.elysium-canvas .style-module_fqm1ZNax input[type="checkbox"]:hover {
  border-color: var(--oc-accent) !important;
}

.elysium-canvas .style-module_HHpjDvv7 input[type="checkbox"]:checked,
.elysium-canvas .style-module_fqm1ZNax input[type="checkbox"]:checked {
  background-color: var(--oc-accent) !important;
  border-color: var(--oc-accent) !important;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.badge {
  font-family: var(--oc-font) !important;
  border-radius: var(--oc-radius-sm) !important;
  font-size: var(--oc-font-size-sm);
  font-weight: 400;
  line-height: 2;
  padding: 2px 8px;
}

.badge.bg-green,
.badge.bg-success {
  background: rgba(48, 209, 88, 0.15) !important;
  color: var(--oc-success) !important;
}

.badge.bg-red,
.badge.bg-danger {
  background: rgba(255, 69, 58, 0.15) !important;
  color: var(--oc-danger) !important;
}

.badge.bg-yellow,
.badge.bg-warning {
  background: rgba(255, 159, 10, 0.15) !important;
  color: var(--oc-warning) !important;
}

.badge.bg-blue,
.badge.bg-info {
  background: rgba(168, 85, 247, 0.15) !important;
  color: var(--oc-accent) !important;
}

/* ==========================================================================
   Progress / Resource Bars
   ========================================================================== */

.progress,
[class*='progress'] {
  background-color: var(--oc-canvas-soft-2) !important;
  border-radius: var(--oc-radius-full) !important;
  height: 6px;
}

.progress-bar,
[class*='progress-bar'] {
  background: var(--oc-accent) !important;
  border-radius: var(--oc-radius-full) !important;
}

/* Resource bar colors */
.bg-green,
.bg-success {
  background: var(--oc-success) !important;
}

.bg-yellow,
.bg-warning {
  background: var(--oc-warning) !important;
}

.bg-red,
.bg-danger {
  background: var(--oc-danger) !important;
}

/* ==========================================================================
   Dropdowns
   ========================================================================== */

.dropdown-menu {
  font-family: var(--oc-font) !important;
  background: var(--oc-canvas-raised) !important;
  border: 1px solid var(--oc-hairline) !important;
  border-radius: var(--oc-radius-sm) !important;
  box-shadow: var(--oc-shadow-md) !important;
}

.dropdown-item {
  color: var(--oc-body) !important;
  font-family: var(--oc-font) !important;
  font-size: var(--oc-font-size);
  padding: 8px 16px;
}

.dropdown-item:hover {
  background: var(--oc-canvas-soft-2) !important;
  color: var(--oc-ink) !important;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
  font-family: var(--oc-font) !important;
  border-radius: var(--oc-radius-sm) !important;
  border: 1px solid var(--oc-hairline) !important;
  padding: 12px 16px;
}

.alert-success {
  background: rgba(48, 209, 88, 0.08) !important;
  border-color: rgba(48, 209, 88, 0.2) !important;
  color: var(--oc-ink) !important;
}

.alert-danger {
  background: rgba(255, 69, 58, 0.08) !important;
  border-color: rgba(255, 69, 58, 0.2) !important;
  color: var(--oc-ink) !important;
}

.alert-warning {
  background: rgba(255, 159, 10, 0.08) !important;
  border-color: rgba(255, 159, 10, 0.2) !important;
  color: var(--oc-ink) !important;
}

.alert-info {
  background: rgba(168, 85, 247, 0.08) !important;
  border-color: rgba(168, 85, 247, 0.2) !important;
  color: var(--oc-ink) !important;
}

/* ==========================================================================
   Spinner / Loading
   ========================================================================== */

.spinner,
[class*='spinner'] {
  border-color: var(--oc-hairline-md);
  border-top-color: var(--oc-accent);
}

/* ==========================================================================
   Dividers
   ========================================================================== */

hr,
[class*='divider'] {
  border: none;
  border-top: 1px solid var(--oc-hairline);
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

.tooltip {
  font-family: var(--oc-font) !important;
}

.tooltip-inner {
  background: var(--oc-canvas-soft-2) !important;
  color: var(--oc-ink) !important;
  border: 1px solid var(--oc-hairline) !important;
  border-radius: var(--oc-radius-sm) !important;
  font-family: var(--oc-font) !important;
  font-size: var(--oc-font-size-sm);
  padding: 6px 10px;
}

/* ==========================================================================
   Toggle / Switch
   ========================================================================== */

.toggle,
[class*='toggle'] {
  background-color: var(--oc-hairline-md) !important;
  border-radius: var(--oc-radius-full) !important;
}

.toggle.active,
[class*='toggle active'] {
  background-color: var(--oc-accent) !important;
}

.toggle-thumb,
[class*='toggle-thumb'] {
  background-color: var(--oc-ink) !important;
  border-radius: var(--oc-radius-full) !important;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination > li > a,
.pagination > li > span {
  color: var(--oc-body) !important;
  background: transparent !important;
  border-color: var(--oc-hairline) !important;
  font-family: var(--oc-font) !important;
}

.pagination > .active > a,
.pagination > .active > span {
  background: var(--oc-accent) !important;
  border-color: var(--oc-accent) !important;
  color: #fff !important;
}

.pagination > li > a:hover {
  background: var(--oc-canvas-soft-2) !important;
  border-color: var(--oc-hairline-md) !important;
  color: var(--oc-ink) !important;
}

/* ==========================================================================
   Checkbox & Radio
   ========================================================================== */

input[type='checkbox'],
input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--oc-canvas-raised) !important;
  border: 1px solid var(--oc-hairline-md) !important;
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: border-color 0.1s ease, background-color 0.1s ease;
}

input[type='radio'] {
  border-radius: var(--oc-radius-full);
}

input[type='checkbox']:hover,
input[type='radio']:hover {
  border-color: var(--oc-accent) !important;
}

input[type='checkbox']:checked,
input[type='radio']:checked {
  background-color: var(--oc-accent) !important;
  border-color: var(--oc-accent) !important;
}

input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

input[type='radio']:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: #fff;
  border-radius: var(--oc-radius-full);
}

input[type='checkbox']:focus-visible,
input[type='radio']:focus-visible {
  outline: 2px solid var(--oc-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Select — custom arrow
   ========================================================================== */

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a7878' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  padding-right: 32px !important;
}

select option {
  background: var(--oc-canvas-raised);
  color: var(--oc-ink);
}

/* ==========================================================================
   Disabled States
   ========================================================================== */

input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-control[readonly] {
  background: var(--oc-canvas-soft) !important;
  color: var(--oc-disabled) !important;
  border-color: var(--oc-hairline) !important;
  cursor: not-allowed;
  opacity: 0.6;
}

button:disabled,
.btn:disabled,
.btn.disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ==========================================================================
   Focus-Visible Ring
   ========================================================================== */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--oc-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Button Active / Pressed
   ========================================================================== */

.btn-primary:active {
  background: var(--oc-accent-active) !important;
  border-color: var(--oc-accent-active) !important;
}

.btn-danger:active {
  background: var(--oc-danger-hover) !important;
}

.btn-secondary:active,
.btn-default:active {
  background: var(--oc-canvas-soft-2) !important;
}

/* ==========================================================================
   Tables (Client Panel)
   ========================================================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--oc-font);
  color: var(--oc-body);
}

thead th {
  color: var(--oc-muted) !important;
  font-size: var(--oc-font-size-sm);
  font-weight: 400;
  padding: 8px 12px;
  border-bottom: 1px solid var(--oc-hairline) !important;
  background: transparent !important;
  text-align: left;
}

tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--oc-hairline) !important;
  vertical-align: middle;
  font-size: var(--oc-font-size);
  background: transparent !important;
}

tbody tr:hover td {
  background: var(--oc-canvas-soft-2) !important;
}

/* ==========================================================================
   Inline Code / Pre
   ========================================================================== */

code:not([class]),
kbd {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--oc-hairline) !important;
  border-radius: var(--oc-radius-sm) !important;
  color: var(--oc-ink) !important;
  font-family: var(--oc-font) !important;
  font-size: var(--oc-font-size-sm);
  padding: 2px 6px;
}

pre {
  background: var(--oc-canvas-soft) !important;
  border: 1px solid var(--oc-hairline) !important;
  border-radius: var(--oc-radius-sm) !important;
  color: var(--oc-ink) !important;
  font-family: var(--oc-font) !important;
  font-size: var(--oc-font-size-sm);
  padding: 16px;
  overflow-x: auto;
  line-height: 1.6;
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul, ol {
  padding-left: 20px;
  color: var(--oc-body);
  font-family: var(--oc-font);
  line-height: 1.8;
}

li {
  font-size: var(--oc-font-size);
}

/* ==========================================================================
   Notifications / Toasts / Flash Messages
   ========================================================================== */

div[class*='Flash'],
div[class*='flash'],
div[class*='Toast'],
div[class*='toast'],
div[class*='Notification'],
div[class*='notification'],
.notification {
  font-family: var(--oc-font) !important;
  background: var(--oc-canvas-raised) !important;
  border: 1px solid var(--oc-hairline-md) !important;
  border-radius: var(--oc-radius-sm) !important;
  color: var(--oc-ink) !important;
  box-shadow: none !important;
}

div[class*='Flash'][class*='success'],
div[class*='toast'][class*='success'],
.notification.success {
  border-left: 3px solid var(--oc-success) !important;
  border-color: rgba(48, 209, 88, 0.25) !important;
}

div[class*='Flash'][class*='error'],
div[class*='Flash'][class*='danger'],
div[class*='toast'][class*='error'],
.notification.error {
  border-left: 3px solid var(--oc-danger) !important;
  border-color: rgba(255, 69, 58, 0.25) !important;
}

div[class*='Flash'][class*='warning'],
div[class*='toast'][class*='warning'],
.notification.warning {
  border-left: 3px solid var(--oc-warning) !important;
  border-color: rgba(255, 159, 10, 0.25) !important;
}

div[class*='Flash'][class*='info'],
div[class*='toast'][class*='info'],
.notification.info {
  border-left: 3px solid var(--oc-accent) !important;
  border-color: rgba(168, 85, 247, 0.25) !important;
}

/* ==========================================================================
   Modals / Dialogs (React)
   ========================================================================== */

div[class*='Modal'],
div[class*='modal'],
div[class*='Dialog'],
div[class*='dialog'],
[role='dialog'] {
  background: var(--oc-canvas-raised) !important;
  border: 1px solid var(--oc-hairline-md) !important;
  border-radius: var(--oc-radius-sm) !important;
  color: var(--oc-body) !important;
  box-shadow: none !important;
}

div[class*='ModalOverlay'],
div[class*='modal-backdrop'],
div[class*='Overlay'] {
  background: rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: none !important;
}

div[class*='ModalHeader'],
div[class*='modal-header'] {
  border-bottom: 1px solid var(--oc-hairline) !important;
  padding: 16px 20px !important;
}

div[class*='ModalFooter'],
div[class*='modal-footer'] {
  border-top: 1px solid var(--oc-hairline) !important;
  padding: 12px 20px !important;
}

/* ==========================================================================
   Empty States
   ========================================================================== */

div[class*='EmptyState'],
div[class*='empty-state'],
div[class*='NoContent'],
div[class*='no-content'] {
  color: var(--oc-muted) !important;
  font-family: var(--oc-font) !important;
}

div[class*='EmptyState'] svg,
div[class*='NoContent'] svg {
  color: var(--oc-disabled) !important;
}

div[class*='EmptyState'] p,
div[class*='NoContent'] p {
  color: var(--oc-muted) !important;
}

/* ==========================================================================
   Skeleton Loaders
   ========================================================================== */

@keyframes elysium-skeleton-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}

div[class*='Skeleton'],
div[class*='skeleton'],
[class*='loading-placeholder'],
[class*='shimmer'] {
  background: var(--oc-canvas-soft-2) !important;
  border-radius: var(--oc-radius-sm) !important;
  animation: elysium-skeleton-pulse 1.4s ease-in-out infinite;
}

/* ==========================================================================
   Activity Log
   ========================================================================== */

div[class*='ActivityLog'],
div[class*='activity-log'],
div[class*='ActivityEntry'],
div[class*='LogEntry'] {
  background: transparent !important;
  border-bottom: 1px solid var(--oc-hairline) !important;
  color: var(--oc-body) !important;
  font-family: var(--oc-font) !important;
}

div[class*='ActivityLog'] time,
div[class*='ActivityEntry'] time,
div[class*='LogEntry'] time {
  color: var(--oc-muted) !important;
  font-size: var(--oc-font-size-sm);
}

/* ==========================================================================
   Server List Rows
   ========================================================================== */

div[class*='ServerRow'],
div[class*='server-row'],
a[class*='ServerEntry'],
div[class*='ServerEntry'] {
  background: var(--oc-canvas-raised) !important;
  border: 1px solid var(--oc-hairline) !important;
  color: var(--oc-body) !important;
  transition: border-color 0.1s ease;
}

div[class*='ServerRow']:hover,
a[class*='ServerEntry']:hover,
div[class*='ServerEntry']:hover {
  border-color: var(--oc-hairline-md) !important;
  background: var(--oc-canvas-soft-2) !important;
}

/* ==========================================================================
   Confirmation / Destructive Dialogs
   ========================================================================== */

div[class*='Confirm'],
div[class*='confirm'],
div[class*='Destructive'],
div[class*='destructive'] {
  background: var(--oc-canvas-raised) !important;
  border: 1px solid rgba(255, 69, 58, 0.2) !important;
  border-radius: var(--oc-radius-sm) !important;
}

/* ==========================================================================
   Scrollbar — Firefox
   ========================================================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--oc-hairline-md) transparent;
}

/* ==========================================================================
   Tailwind Utility Overrides — Missing Values
   ========================================================================== */

/* Text sizes */
.text-xs  { font-size: var(--oc-font-size-xs) !important; }
.text-sm  { font-size: var(--oc-font-size-sm) !important; }
.text-base { font-size: var(--oc-font-size) !important; }
.text-lg  { font-size: var(--oc-font-size-lg) !important; }
.text-xl  { font-size: var(--oc-font-size-xl) !important; }
.text-2xl { font-size: var(--oc-font-size-2xl) !important; }

/* Missing text grays */
.text-gray-600,
.text-neutral-600,
.text-slate-600 { color: var(--oc-muted) !important; }

.text-gray-700,
.text-neutral-700,
.text-slate-700 { color: var(--oc-body) !important; }

.text-gray-800,
.text-neutral-800,
.text-slate-800 { color: var(--oc-ink) !important; }

/* Missing light bg overrides */
.bg-gray-100,
.bg-neutral-100,
.bg-slate-100,
.bg-gray-50,
.bg-neutral-50,
.bg-slate-50 { background-color: var(--oc-canvas-soft) !important; }

/* Semantic Tailwind text colors */
.text-green-400,
.text-green-500,
.text-emerald-400,
.text-emerald-500 { color: var(--oc-success) !important; }

.text-red-400,
.text-red-500 { color: var(--oc-danger) !important; }

.text-yellow-400,
.text-yellow-500,
.text-amber-400,
.text-amber-500 { color: var(--oc-warning) !important; }

.text-blue-400,
.text-blue-500 { color: var(--oc-accent) !important; }

/* Semantic Tailwind bg colors */
.bg-green-500,
.bg-emerald-500 { background-color: var(--oc-success) !important; }

.bg-red-500 { background-color: var(--oc-danger) !important; }

.bg-yellow-500,
.bg-amber-500 { background-color: var(--oc-warning) !important; }

.bg-blue-500 { background-color: var(--oc-accent) !important; }

/* Subtle semantic bg tints */
.bg-green-100,
.bg-emerald-100 { background-color: rgba(48, 209, 88, 0.08) !important; }

.bg-red-100 { background-color: rgba(255, 69, 58, 0.08) !important; }

.bg-yellow-100,
.bg-amber-100 { background-color: rgba(255, 159, 10, 0.08) !important; }

.bg-blue-100 { background-color: rgba(168, 85, 247, 0.08) !important; }

/* Ring/border focus utilities */
.ring-1 { box-shadow: 0 0 0 1px var(--oc-hairline) !important; }
.ring-2 { box-shadow: 0 0 0 2px var(--oc-hairline-md) !important; }
.ring-inset { --tw-ring-inset: inset; }

/* Divide color overrides */
.divide-gray-700 > * + *,
.divide-gray-600 > * + *,
.divide-neutral-700 > * + * { border-color: var(--oc-hairline) !important; }

/* ==========================================================================
   Tailwind Prose Overrides
   ========================================================================== */

.prose,
.prose p,
.prose li {
  color: var(--oc-body) !important;
  font-family: var(--oc-font) !important;
}

.prose h1, .prose h2, .prose h3, .prose h4 {
  color: var(--oc-ink) !important;
  font-family: var(--oc-font) !important;
}

.prose code {
  color: var(--oc-ink) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.prose a {
  color: var(--oc-accent) !important;
}

.prose hr,
.prose blockquote {
  border-color: var(--oc-hairline) !important;
}

.prose blockquote {
  color: var(--oc-muted) !important;
}

/* ==========================================================================
   Power Action Buttons (Server Controls)
   ========================================================================== */

button[class*='power'],
button[class*='Power'],
[class*='PowerButton'],
[class*='ConsoleButton'] {
  font-family: var(--oc-font) !important;
}

[class*='start'],
[class*='Start'] { color: var(--oc-success) !important; }
[class*='stop'],
[class*='Stop']  { color: var(--oc-danger) !important; }
[class*='restart'],
[class*='Restart'] { color: var(--oc-warning) !important; }

/* ==========================================================================
   Form Labels (Client Panel)
   ========================================================================== */

label {
  color: var(--oc-muted) !important;
  font-family: var(--oc-font) !important;
  font-size: var(--oc-font-size-sm);
  font-weight: 400;
  display: block;
  margin-bottom: 4px;
}

/* Helper/error text below inputs */
p[class*='help'],
p[class*='error'],
span[class*='help'],
span[class*='error'],
[class*='InputError'],
[class*='FieldError'] {
  font-family: var(--oc-font) !important;
  font-size: var(--oc-font-size-sm);
  margin-top: 4px;
}

p[class*='error'],
span[class*='error'],
[class*='InputError'],
[class*='FieldError'] {
  color: var(--oc-danger) !important;
}

p[class*='help'],
span[class*='help'] {
  color: var(--oc-muted) !important;
}

/* ===== Purple Neon Glass Enhancement ===== */

body {
  background:
    radial-gradient(circle at 15% 10%, rgba(239,35,60,.16), transparent 32%),
    radial-gradient(circle at 85% 20%, rgba(124,58,237,.12), transparent 30%),
    linear-gradient(135deg, #08070b 0%, #100b16 50%, #08070b 100%) !important;
}

button,
input,
textarea,
select,
[class*="card"],
[class*="Card"] {
  border-color: rgba(239,35,60,.18) !important;
}

button:hover {
  box-shadow: 0 0 18px rgba(239,35,60,.22) !important;
}

a:hover {
  color: #ff4d5e !important;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #08070b;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#b91c2b, #ef233c);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff4d5e;
}


/* ===== BLACK + RED ACCENT ===== */

body {
  background:
    radial-gradient(ellipse 80% 45% at 50% -15%, rgba(239,35,60,.14), transparent 65%),
    linear-gradient(180deg, #050505 0%, #0a0a0a 45%, #050505 100%) !important;
}

.skin-blue .sidebar-menu > li:hover > a::before,
.skin-blue .sidebar-menu > li.active > a::before,
.skin-blue .sidebar-menu > li.menu-open > a::before {
  background: #ef233c !important;
  box-shadow: 0 0 10px rgba(239,35,60,.65) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(#b91c2b, #ef233c);
}

::-webkit-scrollbar-thumb:hover {
  background: #ff4d5e;
}


/* ===== TOP PAGE LOADING BAR: RED ===== */
#nprogress .bar {
    background: #ef233c !important;
    box-shadow: 0 0 10px #ef233c !important;
}

#nprogress .peg {
    box-shadow:
        0 0 10px #ef233c,
        0 0 5px #ef233c !important;
}

#nprogress .spinner-icon {
    border-top-color: #ef233c !important;
    border-left-color: #ef233c !important;
}


/* ===== CYBER LOGIN SCREEN ===== */

body:has(#app) {
    background:
        radial-gradient(circle at 50% 35%, rgba(239, 35, 60, 0.09), transparent 32rem),
        radial-gradient(circle at 10% 90%, rgba(239, 35, 60, 0.04), transparent 25rem),
        #050505 !important;
}

/* subtle hacker scanlines */
body:has(#app)::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.16;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(255,255,255,0.018) 4px
    );
}

/* red terminal glow */
body:has(#app)::after {
    content: '';
    position: fixed;
    width: 420px;
    height: 420px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    background: rgba(239, 35, 60, 0.035);
    filter: blur(80px);
}