/* ==============================================================================
   CRAFTY CONTROLLER 4 — ULTRA-MODERN REFRACTOR & RESPONSIVE DESIGN SYSTEM
   Modern Dark Glassmorphism, Premium Typography & Mobile-First Optimization
   ============================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --- 1. Root Design Tokens Override --- */
:root,
:root.default,
:root.dark {
  --font-family-sans-serif: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  --font-family-monospace: 'JetBrains Mono', "Atkinson Hyperlegible Mono", Menlo, Consolas, monospace !important;

  /* Modern Obsidian & Slate Palette */
  --base-bg: #07090f !important;
  --deep-bg: #040508 !important;
  --card-banner-bg: rgba(15, 21, 35, 0.85) !important;
  --dropdown-bg: #0f1626 !important;
  --outline: rgba(255, 255, 255, 0.08) !important;
  --base-text: #e2e8f0 !important;

  /* Vibrant Accents */
  --primary: #6366f1 !important;
  --primary-hover: #4f46e5 !important;
  --primary-glow: rgba(99, 102, 241, 0.25) !important;

  --success: #10b981 !important;
  --success-glow: rgba(16, 185, 129, 0.25) !important;

  --danger: #ef4444 !important;
  --danger-glow: rgba(239, 68, 68, 0.25) !important;

  --warning: #f59e0b !important;
  --warning-glow: rgba(245, 158, 11, 0.25) !important;

  --info: #06b6d4 !important;
  --info-glow: rgba(6, 182, 212, 0.25) !important;

  /* Surface & Glass Tokens */
  --glass-surface: rgba(14, 20, 33, 0.78);
  --glass-elevated: rgba(20, 28, 46, 0.88);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-border-hover: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(14px);
  --shadow-main: 0 16px 36px -10px rgba(0, 0, 0, 0.65);
  --radius-card: 16px;
  --radius-sm: 10px;
  --radius-pill: 9999px;
  --transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Body & App Container */
body {
  font-family: var(--font-family-sans-serif) !important;
  background-color: var(--deep-bg) !important;
  color: var(--base-text) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container-scroller {
  background: var(--deep-bg) !important;
  min-height: 100vh;
}

.content-wrapper {
  background: transparent !important;
  padding: 1.75rem 2rem !important;
}

/* --- 2. Top Navigation Bar & Responsive Collapse Layout --- */
.navbar.default-layout {
  background: rgba(7, 9, 15, 0.88) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  height: 64px !important;
  transition: all var(--transition) !important;
}

.navbar .navbar-brand-wrapper {
  background: transparent !important;
  border-right: 1px solid var(--glass-border) !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Expanded state: width 255px */
body:not(.sidebar-icon-only) .navbar .navbar-brand-wrapper {
  width: 255px !important;
}

body:not(.sidebar-icon-only) .navbar .navbar-brand-wrapper .brand-logo {
  display: flex !important;
  align-items: center !important;
}

body:not(.sidebar-icon-only) .navbar .navbar-brand-wrapper .brand-logo-mini {
  display: none !important;
}

body:not(.sidebar-icon-only) .navbar .navbar-menu-wrapper {
  width: calc(100% - 255px) !important;
}

/* Collapsed state (sidebar-icon-only): width 70px */
body.sidebar-icon-only .navbar .navbar-brand-wrapper {
  width: 70px !important;
}

body.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo {
  display: none !important;
}

body.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo-mini {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

body.sidebar-icon-only .navbar .navbar-brand-wrapper .brand-logo-mini img {
  max-width: 36px !important;
  height: auto !important;
  filter: drop-shadow(0 2px 6px rgba(99, 102, 241, 0.4));
}

body.sidebar-icon-only .navbar .navbar-menu-wrapper {
  width: calc(100% - 70px) !important;
  padding-left: 15px !important;
}

.navbar .navbar-brand-wrapper .brand-logo img {
  height: 38px !important;
  width: auto !important;
  filter: drop-shadow(0 2px 8px rgba(99, 102, 241, 0.3));
}

.navbar .navbar-menu-wrapper {
  background: transparent !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Collapse / Expand Toggle Button */
.navbar-toggler {
  color: #a5b4fc !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  padding: 0.4rem 0.6rem !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
}

.navbar-toggler:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #fff !important;
}

/* Server Name Badge in Navbar (Oracle) */
#server-name-nav,
.badge-pill.badge-outline-primary {
  background: rgba(99, 102, 241, 0.12) !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
  color: #a5b4fc !important;
  font-family: var(--font-family-monospace) !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 0.3rem 0.85rem !important;
  border-radius: var(--radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
}

.navbar .navbar-nav .nav-item .nav-link {
  color: #94a3b8 !important;
  font-weight: 500 !important;
  transition: all var(--transition) !important;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
  color: #fff !important;
}

/* Nav Dropdown Menus */
.dropdown-menu {
  background: var(--dropdown-bg) !important;
  border: 1px solid var(--glass-border-hover) !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7) !important;
  padding: 0.5rem !important;
}

.dropdown-item {
  color: #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 0.55rem 1rem !important;
  font-weight: 500 !important;
  transition: all var(--transition) !important;
}

.dropdown-item:hover {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #fff !important;
}

/* --- 3. Sidebar Navigation & Seamless Collapse --- */
.sidebar {
  background: rgba(8, 11, 18, 0.95) !important;
  border-right: 1px solid var(--glass-border) !important;
  padding-top: 1rem !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Desktop Expanded Sidebar */
body:not(.sidebar-icon-only) .sidebar {
  width: 255px !important;
}

body:not(.sidebar-icon-only) .main-panel {
  width: calc(100% - 255px) !important;
  margin-left: 255px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Desktop Collapsed Sidebar */
body.sidebar-icon-only .sidebar {
  width: 70px !important;
  overflow: visible !important;
}

body.sidebar-icon-only .main-panel {
  width: calc(100% - 70px) !important;
  margin-left: 70px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Nav Items Common */
.sidebar .nav .nav-item {
  margin: 3px 10px !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition) !important;
  position: relative !important;
}

.sidebar .nav .nav-item .nav-link {
  color: #94a3b8 !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
  padding: 0.75rem 1.15rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  transition: all var(--transition) !important;
  background: transparent !important;
}

.sidebar .nav .nav-item .nav-link i,
.sidebar .nav .nav-item .nav-link svg {
  font-size: 1.25rem !important;
  color: #818cf8 !important;
  transition: color var(--transition) !important;
}

/* ==============================================================================
   FIX FOR HOVER: NEVER ALLOW SOLID WHITE HOVER - ALWAYS DARK GLASS & CRISP WHITE TEXT
   ============================================================================== */
.sidebar > .nav:not(.sub-menu) > .nav-item:hover:not(.nav-profile):not(.hover-open) > .nav-link:not([aria-expanded="true"]),
.sidebar .nav .nav-item:hover > .nav-link,
.sidebar .nav .nav-item.hover-open > .nav-link,
.sidebar .nav .nav-item .nav-link:hover,
.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #ffffff !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  padding-left: 1.15rem !important;
}

.sidebar .nav .nav-item:hover > .nav-link .menu-title,
.sidebar .nav .nav-item.hover-open > .nav-link .menu-title,
.sidebar .nav .nav-item:hover > .nav-link i,
.sidebar .nav .nav-item.hover-open > .nav-link i {
  color: #ffffff !important;
}

/* Active Nav Item */
.sidebar .nav .nav-item.active {
  background: rgba(99, 102, 241, 0.18) !important;
  border-left: 3px solid var(--primary) !important;
}

.sidebar .nav .nav-item.active .nav-link {
  color: #ffffff !important;
  font-weight: 600 !important;
}

.sidebar .nav .nav-item.active .nav-link i {
  color: #a5b4fc !important;
}

/* ==============================================================================
   ERADICATE ALL LEGACY TREE LINES, DOTS, WHITE STRIPES & PSEUDO-ELEMENTS
   ============================================================================== */
.sidebar .nav .nav-item .nav-link:before,
.sidebar .nav .nav-item .nav-link:after,
.sidebar .nav.sub-menu .nav-item .nav-link:before,
.sidebar .nav.sub-menu .nav-item .nav-link:after,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:before,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:after,
.sidebar .nav .nav-item .collapsing .sub-menu .nav-item .nav-link:before,
.sidebar .nav .nav-item .collapsing .sub-menu .nav-item .nav-link:after,
.sidebar > .nav .nav-item:not(.hover-open) .collapse .sub-menu .nav-item .nav-link:before,
.sidebar > .nav .nav-item:not(.hover-open) .collapsing .sub-menu .nav-item .nav-link:before,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:hover:before,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:hover:after,
.sidebar .nav .nav-item .collapsing .sub-menu .nav-item .nav-link:hover:before,
.sidebar .nav .nav-item .collapsing .sub-menu .nav-item .nav-link:hover:after,
.sidebar > .nav .nav-item:not(.hover-open) .collapse .sub-menu .nav-item .nav-link:hover:before,
.sidebar > .nav .nav-item:not(.hover-open) .collapsing .sub-menu .nav-item .nav-link:hover:after,
.sidebar > .nav .nav-item:not(.hover-open) .collapse.show .sub-menu .nav-item .nav-link:hover:before,
.sidebar > .nav .nav-item:not(.hover-open) .collapse.show .sub-menu .nav-item .nav-link:hover:after,
.sidebar > .nav > .nav-item:not(.nav-profile) > .nav-link:before,
.sidebar > .nav > .nav-item:not(.nav-profile) > .nav-link:after,
.sidebar > .nav:not(.sub-menu) > .nav-item:hover:not(.nav-profile):not(.hover-open) > .nav-link:not([aria-expanded="true"]):before,
.sidebar > .nav:not(.sub-menu) > .nav-item:hover:not(.nav-profile):not(.hover-open) > .nav-link:not([aria-expanded="true"]):after,
.sidebar-mini:not(.sidebar-icon-only) .sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:before,
.sidebar-mini:not(.sidebar-icon-only) .sidebar .nav .nav-item .collapsing .sub-menu .nav-item .nav-link:before,
.sidebar-mini:not(.sidebar-icon-only) .sidebar .nav .nav-item .collapse.show .sub-menu .nav-item .nav-link:before,
.sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link:before,
.sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link:after,
.sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link:hover:before,
.sidebar-icon-only .sidebar .nav.sub-menu .nav-item .nav-link:hover:after,
.sidebar .nav.sub-menu:before,
.sidebar .nav.sub-menu:after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ==============================================================================
   MODERN CHILD SUB-MENU ITEMS (Servidores -> Oracle, Crear nuevo Servidor)
   ============================================================================== */
.sidebar .nav.sub-menu,
.sidebar .nav .nav-item .collapse .sub-menu,
.sidebar .nav .nav-item .collapsing .sub-menu {
  padding: 0.35rem 0.5rem !important;
  margin: 0.25rem 0 0.5rem 0.75rem !important;
  background: rgba(10, 14, 25, 0.6) !important;
  border-left: 2px solid rgba(99, 102, 241, 0.3) !important;
  border-radius: 0 10px 10px 0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

.sidebar .nav.sub-menu .nav-item,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item {
  margin: 2px 0 !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link {
  padding: 0.6rem 0.85rem !important;
  font-size: 0.86rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  border-radius: 8px !important;
  color: #cbd5e1 !important;
  background: transparent !important;
  transition: all var(--transition) !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:hover,
.sidebar .nav.sub-menu .nav-item.active .nav-link {
  background: rgba(99, 102, 241, 0.2) !important;
  color: #ffffff !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link i,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link i {
  color: #818cf8 !important;
  font-size: 1.15rem !important;
  margin-right: 0 !important;
}

.sidebar .nav.sub-menu .nav-item .nav-link:hover i,
.sidebar .nav .nav-item .collapse .sub-menu .nav-item .nav-link:hover i {
  color: #ffffff !important;
}

/* ==============================================================================
   COLLAPSED (SIDEBAR-ICON-ONLY) SUB-ELEMENT RULES
   ============================================================================== */
body.sidebar-icon-only .sidebar .nav {
  overflow: visible !important;
}

body.sidebar-icon-only .sidebar .nav .nav-item {
  margin: 4px 6px !important;
}

body.sidebar-icon-only .sidebar .nav .nav-item .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem 0 !important;
  text-align: center !important;
  gap: 0 !important;
}

/* Hide text when collapsed and not hovering */
body.sidebar-icon-only .sidebar .nav .nav-item:not(.hover-open) .nav-link .menu-title,
body.sidebar-icon-only .sidebar .nav .nav-item:not(.hover-open) .nav-link .badge,
body.sidebar-icon-only .sidebar .nav .nav-item:not(.hover-open) .nav-link .menu-arrow,
body.sidebar-icon-only .sidebar .nav .nav-item:not(.hover-open) .collapse,
body.sidebar-icon-only .sidebar .nav .nav-item.nav-profile,
body.sidebar-icon-only .sidebar .nav .nav-item.nav-category {
  display: none !important;
}

body.sidebar-icon-only .sidebar .nav .nav-item .nav-link i,
body.sidebar-icon-only .sidebar .nav .nav-item .nav-link svg {
  margin: 0 !important;
  font-size: 1.35rem !important;
}

/* Floating Tooltip Menu Title when Hovering over Collapsed Icon */
body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .nav-link .menu-title {
  display: flex !important;
  align-items: center !important;
  position: absolute !important;
  left: 64px !important;
  top: 0 !important;
  height: 100% !important;
  min-width: 170px !important;
  padding: 0 1.15rem !important;
  background: #0d1220 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 0 10px 10px 0 !important;
  color: #ffffff !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.6) !important;
  z-index: 1060 !important;
  white-space: nowrap !important;
}

/* Submenu Popup (e.g. servers list) in Collapsed Mode */
body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapse,
body.sidebar-icon-only .sidebar .nav .nav-item.hover-open .collapsing {
  background: #0d1220 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7) !important;
  padding: 0.5rem 0 !important;
  display: block !important;
  position: absolute !important;
  left: 64px !important;
  top: 100% !important;
  width: 220px !important;
  z-index: 1060 !important;
}

/* --- 4. Cards & Dashboard Containers --- */
.card {
  background: var(--glass-surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-main) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: border-color var(--transition), transform var(--transition) !important;
  margin-bottom: 1.5rem !important;
  overflow: hidden;
}

.card:hover {
  border-color: var(--glass-border-hover) !important;
}

.card .card-body {
  padding: 1.75rem !important;
}

.card-title {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.15rem !important;
  letter-spacing: -0.01em !important;
}

/* Page Header Titles */
.page-title-header {
  margin-bottom: 1.75rem !important;
}

.page-header .page-title {
  color: #fff !important;
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.page-header .page-title small {
  font-family: var(--font-family-monospace) !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
}

/* --- 5. Interactive Terminal Console --- */
#virt_console {
  background: #030408 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-card) !important;
  padding: 1.25rem !important;
  color: #f1f5f9 !important;
  font-family: var(--font-family-monospace) !important;
  font-size: 0.85rem !important;
  line-height: 1.5 !important;
  min-height: 440px !important;
  max-height: 65vh !important;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(99, 102, 241, 0.4) transparent !important;
}

#virt_console::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  display: block !important;
}

#virt_console::-webkit-scrollbar-track {
  background: transparent !important;
}

#virt_console::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.35) !important;
  border-radius: 9999px !important;
}

#virt_console::-webkit-scrollbar-thumb:hover {
  background: rgba(99, 102, 241, 0.6) !important;
}

/* Terminal Command Input Bar */
div.server_command {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin-top: 1rem !important;
}

input.server_command {
  background: rgba(10, 14, 25, 0.9) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  font-family: var(--font-family-monospace) !important;
  font-size: 0.9rem !important;
  padding: 0.75rem 1rem !important;
  flex: 1 !important;
  transition: all var(--transition) !important;
}

input.server_command:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  outline: none !important;
}

div.server_command button#submit {
  border-radius: var(--radius-sm) !important;
  padding: 0.75rem 1.4rem !important;
  font-weight: 600 !important;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px var(--primary-glow) !important;
  transition: all var(--transition) !important;
}

div.server_command button#submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px var(--primary-glow) !important;
}

/* --- 6. Server Control Action Buttons --- */
.server-controls-wrapper,
.card-body .d-none.d-sm-block,
.card-body .d-block.d-sm-none {
  margin-bottom: 1.25rem !important;
}

/* Modernize Bootstrap Buttons */
.btn {
  font-family: var(--font-family-sans-serif) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.65rem 1.15rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  transition: all var(--transition) !important;
}

.btn:hover {
  transform: translateY(-1px) !important;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: 0 4px 12px var(--primary-glow) !important;
}

.btn-success,
.btn-outline-success {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid var(--success) !important;
  color: #34d399 !important;
  box-shadow: 0 4px 12px var(--success-glow) !important;
}

.btn-success:hover,
.btn-outline-success:hover {
  background: var(--success) !important;
  color: #000 !important;
}

.btn-danger,
.btn-outline-danger {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid var(--danger) !important;
  color: #f87171 !important;
  box-shadow: 0 4px 12px var(--danger-glow) !important;
}

.btn-danger:hover,
.btn-outline-danger:hover {
  background: var(--danger) !important;
  color: #fff !important;
}

.btn-warning,
.btn-outline-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid var(--warning) !important;
  color: #fbbf24 !important;
  box-shadow: 0 4px 12px var(--warning-glow) !important;
}

.btn-warning:hover,
.btn-outline-warning:hover {
  background: var(--warning) !important;
  color: #000 !important;
}

.btn-info,
.btn-outline-info {
  background: rgba(6, 182, 212, 0.15) !important;
  border: 1px solid var(--info) !important;
  color: #22d3ee !important;
}

.btn-info:hover,
.btn-outline-info:hover {
  background: var(--info) !important;
  color: #000 !important;
}

/* --- 7. Data Tables & Responsive Wrappers --- */
.table-responsive {
  border-radius: var(--radius-sm) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.table {
  color: var(--base-text) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

.table thead th {
  background: rgba(9, 13, 23, 0.8) !important;
  color: #94a3b8 !important;
  font-family: var(--font-family-monospace) !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--glass-border) !important;
  border-top: none !important;
  padding: 1rem !important;
}

.table tbody tr {
  transition: background-color var(--transition) !important;
}

.table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.table tbody td {
  border-top: 1px solid var(--glass-border) !important;
  border-bottom: none !important;
  padding: 0.95rem 1rem !important;
  vertical-align: middle !important;
}

/* Badges */
.badge {
  border-radius: var(--radius-pill) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  padding: 0.35rem 0.75rem !important;
  letter-spacing: 0.03em !important;
}

.badge-success {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.18) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.badge-info {
  background: rgba(99, 102, 241, 0.18) !important;
  color: #a5b4fc !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
}

/* Form Controls */
.form-control {
  background: rgba(10, 14, 25, 0.85) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  font-size: 0.92rem !important;
  transition: all var(--transition) !important;
}

.form-control:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
  color: #fff !important;
}

/* --- 8. Modern Login Page Overhaul --- */
.auth.auth-bg-1 {
  background: radial-gradient(circle at 50% 20%, #161b2e 0%, #07090f 80%) !important;
  min-height: 100vh !important;
}

.auto-form-wrapper.login-modal {
  background: rgba(14, 19, 32, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.8) !important;
  padding: 2.5rem 2rem !important;
}

.auto-form-logo img {
  height: 48px !important;
  filter: drop-shadow(0 4px 16px rgba(99, 102, 241, 0.4)) !important;
  margin-bottom: 1.5rem !important;
}

.login-text-input {
  background: rgba(8, 11, 20, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 0.8rem 1rem !important;
}

.login-text-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-glow) !important;
}

.submit-btn {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  padding: 0.85rem !important;
  box-shadow: 0 6px 18px var(--primary-glow) !important;
}

/* --- 9. Mobile Responsiveness Refactor --- */
@media screen and (max-width: 991px) {
  /* Compact Header */
  .navbar .navbar-brand-wrapper {
    width: 60px !important;
    border-right: none !important;
  }

  .content-wrapper {
    padding: 1.25rem 0.85rem !important;
  }

  /* Slide-in Mobile Drawer */
  .sidebar-offcanvas {
    position: fixed !important;
    top: 64px !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 82vw !important;
    height: calc(100vh - 64px) !important;
    background: rgba(7, 10, 18, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--glass-border-hover) !important;
    box-shadow: 15px 0 40px rgba(0, 0, 0, 0.75) !important;
    z-index: 1050 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
  }

  .sidebar-offcanvas.active {
    transform: translateX(0) !important;
  }

  /* Mobile Terminal */
  #virt_console {
    min-height: 340px !important;
    max-height: 50vh !important;
    font-size: 0.78rem !important;
    padding: 0.85rem !important;
  }

  div.server_command {
    flex-direction: row !important;
  }

  input.server_command {
    font-size: 0.82rem !important;
    padding: 0.65rem 0.8rem !important;
  }

  div.server_command button#submit {
    padding: 0.65rem 1rem !important;
    font-size: 0.85rem !important;
  }

  /* Touch targets for mobile controls */
  .btn {
    min-height: 42px !important;
    padding: 0.55rem 0.95rem !important;
  }

  /* Grid metrics cards wrapping */
  .col-xl-4, .col-md-5, .col-sm-6 {
    margin-bottom: 0.75rem !important;
  }

  .page-header .page-title {
    font-size: 1.25rem !important;
  }

  .card .card-body {
    padding: 1.2rem 1rem !important;
  }
}

@media screen and (max-width: 576px) {
  .auto-form-wrapper.login-modal {
    padding: 1.75rem 1.25rem !important;
    margin: 1rem !important;
  }

  #virt_console {
    font-size: 0.74rem !important;
  }

  .btn {
    font-size: 0.82rem !important;
  }
}

/* ==============================================================================
   PLAYER MANAGEMENT & ACTIONS TOOLBAR (MODERN REDESIGN)
   ============================================================================== */
.player-section-card {
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  padding: 1.25rem 1.25rem 0.75rem 1.25rem !important;
  margin-bottom: 1.5rem !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.player-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.player-section-header h4 {
  font-size: 1.12rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* Modern Player Table */
.player-table {
  width: 100% !important;
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.player-table thead th {
  background: rgba(15, 23, 42, 0.6) !important;
  color: #94a3b8 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top: none !important;
  padding: 0.75rem 0.85rem !important;
}

.player-table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  transition: background 0.15s ease !important;
}

.player-table tbody tr:hover {
  background: rgba(99, 102, 241, 0.07) !important;
}

.player-table tbody td {
  padding: 0.75rem 0.85rem !important;
  vertical-align: middle !important;
  border-top: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
}

/* Player User Cell */
.player-user-cell {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
  text-align: left !important;
}

.player-avatar-badge {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(99, 102, 241, 0.15) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #818cf8 !important;
  font-size: 1.15rem !important;
  flex-shrink: 0 !important;
}

.player-name-text {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em !important;
}

/* Status Cell */
.player-status-cell {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  text-align: left !important;
}

.player-status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 9999px !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  width: fit-content !important;
  line-height: 1 !important;
}

.player-status-pill.online {
  background: rgba(16, 185, 129, 0.15) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

.player-status-pill.offline {
  background: rgba(100, 116, 139, 0.15) !important;
  border: 1px solid rgba(100, 116, 139, 0.3) !important;
  color: #94a3b8 !important;
}

.player-status-pill .status-indicator-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.player-status-pill.online .status-indicator-dot {
  background: #10b981 !important;
  box-shadow: 0 0 8px #10b981 !important;
}

.player-status-pill.offline .status-indicator-dot {
  background: #64748b !important;
}

.player-last-seen-text {
  font-size: 0.74rem !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  margin-top: 1px !important;
}

/* Modern Player Action Buttons Toolbar */
.player-actions-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.35rem !important;
  flex-wrap: wrap !important;
}

.btn-player-action,
#player-body .btn-player-action,
#banned-body .btn-player-action,
#banned-body-mobile .btn-player-action,
.player-actions-toolbar .btn,
#player-body td .btn,
#banned-body td .btn,
#banned-body-mobile td .btn {
  font-family: var(--font-family-sans-serif) !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 0.3rem 0.65rem !important;
  min-height: 28px !important;
  height: 28px !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.32rem !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  outline: none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.btn-player-action i,
.player-actions-toolbar .btn i {
  font-size: 0.88rem !important;
  line-height: 1 !important;
}

.btn-player-action:hover,
.player-actions-toolbar .btn:hover {
  transform: translateY(-1px) !important;
}

/* Ban */
.btn-player-ban,
#player-body .btn-danger {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #fca5a5 !important;
}
.btn-player-ban:hover,
#player-body .btn-danger:hover {
  background: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.45) !important;
}

/* Kick */
.btn-player-kick,
#player-body .btn-outline-danger {
  background: rgba(249, 115, 22, 0.14) !important;
  border-color: rgba(249, 115, 22, 0.4) !important;
  color: #fdba74 !important;
}
.btn-player-kick:hover,
#player-body .btn-outline-danger:hover {
  background: #f97316 !important;
  border-color: #f97316 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(249, 115, 22, 0.45) !important;
}

/* OP */
.btn-player-op,
#player-body .btn-warning {
  background: rgba(234, 179, 8, 0.14) !important;
  border-color: rgba(234, 179, 8, 0.4) !important;
  color: #fde047 !important;
}
.btn-player-op:hover,
#player-body .btn-warning:hover {
  background: #eab308 !important;
  border-color: #eab308 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 10px rgba(234, 179, 8, 0.45) !important;
}

/* De-OP */
.btn-player-deop,
#player-body .btn-outline-warning {
  background: rgba(148, 163, 184, 0.1) !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
  color: #cbd5e1 !important;
}
.btn-player-deop:hover,
#player-body .btn-outline-warning:hover {
  background: rgba(148, 163, 184, 0.28) !important;
  border-color: rgba(148, 163, 184, 0.55) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(148, 163, 184, 0.3) !important;
}

/* Unban */
.btn-player-unban,
#banned-body .btn-danger,
#banned-body-mobile .btn-danger {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  color: #6ee7b7 !important;
}
.btn-player-unban:hover,
#banned-body .btn-danger:hover,
#banned-body-mobile .btn-danger:hover {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.45) !important;
}

/* Soft Badges */
.badge-danger-soft {
  background: rgba(239, 68, 68, 0.15) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
  padding: 0.25rem 0.55rem !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* Fallback & Backward Compatibility for Legacy Row/Col Buttons */
#player-body td .row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  margin: 0 !important;
  justify-content: flex-end !important;
}
#player-body td .row > .col {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Ensure Table Cells Center Alignment */
#player-body td,
#banned-body td,
#banned-body-mobile td {
  vertical-align: middle !important;
}

.table.no-scroll {
  table-layout: auto !important;
}