/*
 * WRAITH THEME INTEGRATION for Server Panel
 * Adapts the panel's existing classes to the Wraith dark/teal/liquid-glass aesthetic.
 * Loaded AFTER style.css so it overrides the purple theme.
 */

:root {
  /* Override the panel's purple palette with Wraith's teal/ghost palette */
  --bg-primary: #020203;
  --bg-secondary: #0a0c10;
  --bg-card: rgba(16, 18, 24, 0.55);
  --text-primary: #cfd6de;
  --text-secondary: #838d99;
  --accent: #14e0e3;
  --accent-hover: #2ef0f3;
  --accent-glow: rgba(20, 224, 227, 0.45);
  --accent-dim: rgba(20, 224, 227, 0.15);
  --success: #a9e2c3;
  --danger: #f2a3a3;
  --warning: #f5d76e;
  --border: rgba(20, 224, 227, 0.18);
  --border-light: rgba(20, 224, 227, 0.28);
  --progress-bg: rgba(255, 255, 255, 0.05);
}

/* ===== Body: dark radial gradient + monospace feel ===== */
body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: radial-gradient(ellipse at top, #0a0c10 0%, #020203 60%, #000 100%) !important;
  background-image: none !important;
  animation: none !important;
  color: var(--text-primary);
}

/* Remove the purple floating orbs */
body::before, body::after {
  display: none !important;
  content: none !important;
}

/* ===== Headings glow ===== */
h1, h2, h3, .logo h1 {
  color: var(--accent) !important;
  text-shadow: 0 0 12px var(--accent-glow);
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--accent) !important;
}

/* ===== Header / Sidebar ===== */
header {
  background: rgba(10, 12, 16, 0.6) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right-color: var(--border) !important;
}

.nav-btn {
  font-family: inherit;
}
.nav-btn.active {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border-color: var(--border-light) !important;
  box-shadow: inset 4px 0 0 var(--accent), 0 0 12px rgba(20, 224, 227, 0.25) !important;
}
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--accent) !important;
}

/* ===== Liquid Glass Containers ===== */
.stat-card,
.info-panel,
.mc-server-card,
.settings-card,
.services-table,
.file-manager,
.login-card,
.modal-content,
.cf-modpack-card,
.sc-header-pterodactyl,
.sc-sidebar,
.pt-console,
#sc-tab-ftp,
#sc-tab-backups,
#sc-tab-mods,
#sc-tab-mrmods,
#sc-tab-ue4ss {
  background: rgba(16, 18, 24, 0.45) !important;
  backdrop-filter: blur(20px) saturate(160%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(1.08) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 3px rgba(20, 224, 227, 0.4),
    0 0 24px rgba(20, 224, 227, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.02) !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

/* Hover intensifies the teal glow */
.mc-server-card:hover,
.cf-modpack-card:hover,
.stat-card:hover {
  border-color: var(--border-light) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 5px rgba(20, 224, 227, 0.7),
    0 0 32px rgba(20, 224, 227, 0.4),
    0 0 90px rgba(20, 224, 227, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Remove the old white glare ::after */
.stat-card::after,
.info-panel::after,
.mc-server-card::after,
.settings-card::after,
.login-card::after {
  content: none !important;
  display: none !important;
}

/* ===== Status dots / badges ===== */
.status-dot.online, .status-indicator.running {
  background: var(--success) !important;
  box-shadow: 0 0 8px var(--success) !important;
}
.status-dot.offline, .status-indicator.stopped {
  background: var(--danger) !important;
  box-shadow: 0 0 8px var(--danger) !important;
}
.status-badge.online { background: var(--success) !important; color: #020203 !important; }
.status-badge.offline { background: var(--danger) !important; color: #020203 !important; }

/* ===== Buttons: teal-glowing glass ===== */
.btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(10px);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 0 12px rgba(20, 224, 227, 0.4) !important;
}
.btn-primary {
  background: rgba(20, 224, 227, 0.25) !important;
  border-color: var(--border-light) !important;
  color: var(--accent) !important;
}
.btn-primary:hover {
  background: rgba(20, 224, 227, 0.4) !important;
  box-shadow: 0 0 16px rgba(20, 224, 227, 0.6) !important;
}
.btn-success {
  background: rgba(169, 226, 195, 0.2) !important;
  color: var(--success) !important;
}
.btn-danger {
  background: rgba(242, 163, 163, 0.18) !important;
  color: var(--danger) !important;
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ===== Inputs ===== */
input, textarea, select,
.mc-command input,
.settings-form input,
.settings-form select,
.cf-search input,
.form-group input,
.form-group select,
.pt-command input,
.sc-stat-card input {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  font-family: inherit;
}
input:focus, textarea:focus, select:focus,
.mc-command input:focus,
.settings-form input:focus,
.cf-search input:focus,
.form-group input:focus,
.pt-command input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 8px rgba(20, 224, 227, 0.3) !important;
}

/* ===== Console / Terminal — keep deep black ===== */
.console-output, .pt-console-output, .terminal, .terminal-output {
  background: #020203 !important;
  color: var(--text-primary) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
}
.pt-console {
  background: #020203 !important;
  border: 1px solid var(--border) !important;
}
.terminal-header {
  background: #0a0c10 !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ===== Progress bars ===== */
.progress-fill {
  background: var(--accent) !important;
  box-shadow: 0 0 6px rgba(20, 224, 227, 0.5);
}
.progress-fill.warning { background: var(--warning) !important; }
.progress-fill.danger { background: var(--danger) !important; }

/* ===== Tables ===== */
th, td {
  border-bottom: 1px solid rgba(20, 224, 227, 0.10) !important;
}
th {
  color: var(--text-secondary) !important;
}
tr:hover {
  background: rgba(20, 224, 227, 0.05) !important;
}

/* ===== Server control nav tabs ===== */
.sc-nav-btn {
  color: var(--text-secondary) !important;
}
.sc-nav-btn:hover {
  color: var(--accent) !important;
}
.sc-nav-btn.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ===== Scrollbar — teal-tinted ===== */
::-webkit-scrollbar-track {
  background: #020203 !important;
}
::-webkit-scrollbar-thumb {
  background: rgba(20, 224, 227, 0.25) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(20, 224, 227, 0.45) !important;
}

/* ===== Misc ===== */
a { color: var(--accent); }
.error { color: var(--danger) !important; }
.settings-ok { color: var(--success) !important; }
.settings-warn { color: var(--warning) !important; }
.mc-modpack { color: var(--warning) !important; }
.cf-downloads { color: var(--accent) !important; }
.settings-desc a, .file-breadcrumb button { color: var(--accent) !important; }

/* Login page background */
.login-body {
  background: radial-gradient(ellipse at top, #0a0c10 0%, #020203 60%, #000 100%) !important;
}