@import "default.css";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

/* =====================================================================
   CruxHosting Theme — Dark, modern, game-hosting aesthetic
   Built on top of CtrlPanel's compiled AdminLTE base (default.css)
   ===================================================================== */

:root {
  --crux-bg:          #0a0a0a;
  --crux-bg-card:     #111111;
  --crux-bg-sidebar:  #0d0d0d;
  --crux-bg-elevated: #161616;
  --crux-bg-hover:    #1a1a1a;
  --crux-border:      #1a1a1a;
  --crux-border-soft: #222222;
  --crux-accent:      #00ff88;
  --crux-accent-h:    #00cc6a;
  --crux-accent-dim:  rgba(0, 255, 136, 0.10);
  --crux-glow:        rgba(0, 255, 136, 0.25);
  --crux-text:        #ffffff;
  --crux-text-muted:  #888888;
  --crux-text-dim:    #5a5a5a;
  --crux-danger:      #ff4757;
  --crux-warning:     #ffa502;
  --crux-info:        #4dabf7;
  --crux-radius:      12px;
  --crux-radius-sm:   8px;
  --crux-radius-lg:   16px;
  --crux-trans:       0.2s ease;
  --crux-font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ============ Base ============ */
html, body, .dark-mode,
body.sidebar-mini,
body.layout-fixed.dark-mode {
  background: var(--crux-bg) !important;
  color: var(--crux-text);
  font-family: var(--crux-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { letter-spacing: 0.005em; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--crux-bg); }
::-webkit-scrollbar-thumb { background: #1f1f1f; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a2a; }

a { color: var(--crux-accent); transition: color var(--crux-trans); }
a:hover, a:focus { color: var(--crux-accent-h); text-decoration: none; }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--crux-text);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.text-muted { color: var(--crux-text-muted) !important; }

/* ============ Wrapper / Layout ============ */
.wrapper { background: var(--crux-bg) !important; }

.content-wrapper,
body:not(.sidebar-mini-md) .content-wrapper,
body:not(.sidebar-mini-md) .main-footer,
body:not(.sidebar-mini-md) .main-header {
  background: var(--crux-bg) !important;
  transition: margin-left .25s ease;
}

.content-header { padding: 1.5rem 1.5rem 0.5rem; }
.content-header h1 { font-size: 1.6rem; font-weight: 700; }

.content { padding: 0.5rem 0.75rem 2rem; }

/* ============ Top Navbar ============ */
.main-header.navbar {
  background: var(--crux-bg) !important;
  border-bottom: 1px solid var(--crux-border) !important;
  min-height: 60px;
  padding: 0 0.5rem;
  box-shadow: none;
}

.main-header .nav-link {
  color: var(--crux-text-muted) !important;
  transition: color var(--crux-trans);
  font-weight: 500;
}
.main-header .nav-link:hover,
.main-header .nav-link:focus { color: var(--crux-text) !important; }

.main-header .nav-link .fa-coins { color: var(--crux-accent); }

.main-header .navbar-badge {
  background: var(--crux-accent);
  color: #000;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 6px;
  font-size: 10px;
}

/* ============ Sidebar ============ */
.main-sidebar,
.main-sidebar.sidebar-dark-primary,
[class*="sidebar-dark"] {
  background: var(--crux-bg-sidebar) !important;
  border-right: 1px solid var(--crux-border);
  box-shadow: none !important;
  width: 250px;
}

.layout-fixed .wrapper .sidebar {
  background: var(--crux-bg-sidebar) !important;
  height: calc(100vh - 60px) !important;
  padding: 0.5rem 0.75rem;
}

.brand-link,
[class*="sidebar-dark"] .brand-link {
  background: var(--crux-bg-sidebar) !important;
  border-bottom: 1px solid var(--crux-border) !important;
  color: var(--crux-text) !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 0.85rem 1rem !important;
  height: 60px;
  transition: background var(--crux-trans);
}
.brand-link:hover { background: var(--crux-bg-hover) !important; color: var(--crux-text) !important; }

.brand-link .brand-image {
  margin: 0 !important;
  opacity: 1 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px;
  filter: drop-shadow(0 0 6px var(--crux-glow));
}

.brand-link .brand-text {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--crux-text);
}
.brand-link .brand-text .crux-accent { color: var(--crux-accent); }

/* Sidebar nav items */
.nav-sidebar { padding: 0; }
.nav-sidebar .nav-item { margin: 2px 0; }

.nav-sidebar > .nav-item > .nav-link,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link {
  background: transparent !important;
  color: var(--crux-text-muted) !important;
  border-radius: var(--crux-radius-sm);
  padding: 0.6rem 0.85rem;
  font-weight: 500;
  font-size: 0.92rem;
  transition: background var(--crux-trans), color var(--crux-trans), box-shadow var(--crux-trans);
  position: relative;
}

.nav-sidebar > .nav-item > .nav-link .nav-icon {
  font-size: 0.95rem;
  width: 20px;
  margin-right: 8px;
  text-align: center;
  color: var(--crux-text-muted);
  transition: color var(--crux-trans);
}

.nav-sidebar > .nav-item > .nav-link p {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
}

.nav-sidebar > .nav-item > .nav-link:hover,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link:hover {
  background: var(--crux-bg-hover) !important;
  color: var(--crux-text) !important;
}
.nav-sidebar > .nav-item > .nav-link:hover .nav-icon { color: var(--crux-text); }

.nav-sidebar > .nav-item > .nav-link.active,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background: var(--crux-accent-dim) !important;
  color: var(--crux-accent) !important;
  box-shadow: inset 3px 0 0 var(--crux-accent), 0 0 18px -8px var(--crux-glow);
  border-radius: var(--crux-radius-sm);
}
.nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: var(--crux-accent); }

.nav-sidebar .nav-link .badge {
  background: var(--crux-bg-elevated);
  color: var(--crux-text-muted);
  font-weight: 600;
  font-size: 11px;
  border-radius: 999px;
  padding: 3px 8px;
}
.nav-sidebar .nav-link.active .badge {
  background: var(--crux-accent);
  color: #000;
}
.nav-sidebar .nav-link .badge-success { background: var(--crux-accent); color: #000; }
.nav-sidebar .nav-link .badge-info { background: var(--crux-info); color: #000; }

.nav-sidebar .nav-header {
  color: var(--crux-text-dim) !important;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 1.25rem 0.85rem 0.5rem !important;
  background: transparent !important;
}

/* ============ Cards ============ */
.card,
.dark-mode .card,
.card.card-default,
.card.card-outline {
  background: var(--crux-bg-card) !important;
  border: 1px solid var(--crux-border) !important;
  border-radius: var(--crux-radius) !important;
  box-shadow: none !important;
  color: var(--crux-text);
  margin-bottom: 1rem;
  overflow: hidden;
}

.card-header,
.dark-mode .card .card-header {
  background: var(--crux-bg-card) !important;
  border-bottom: 1px solid var(--crux-border) !important;
  border-radius: 0 !important;
  padding: 1rem 1.25rem;
  color: var(--crux-text) !important;
}
.card-header:first-child { border-radius: var(--crux-radius) var(--crux-radius) 0 0 !important; }

.card-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--crux-text);
  letter-spacing: -0.01em;
}
.card-title i { color: var(--crux-accent); }

.card-body,
.dark-mode .card .card-body {
  background: var(--crux-bg-card) !important;
  color: var(--crux-text);
  padding: 1.25rem;
}

.card-footer,
.dark-mode .card .card-footer {
  background: var(--crux-bg-card) !important;
  border-top: 1px solid var(--crux-border) !important;
  border-radius: 0 0 var(--crux-radius) var(--crux-radius) !important;
  padding: 1rem 1.25rem;
}

.card.card-outline.card-primary { border-top: 1px solid var(--crux-border) !important; }
.card.card-outline.card-primary .card-header { border-color: var(--crux-border) !important; }

/* ============ Info Boxes (dashboard stats) ============ */
.info-box,
.dark-mode .info-box {
  background: var(--crux-bg-card) !important;
  border: 1px solid var(--crux-border) !important;
  border-radius: var(--crux-radius) !important;
  box-shadow: none !important;
  color: var(--crux-text);
  min-height: 88px;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--crux-trans), transform var(--crux-trans);
}
.info-box:hover { border-color: #2a2a2a !important; transform: translateY(-1px); }

.info-box .info-box-icon {
  background: var(--crux-bg-elevated) !important;
  color: var(--crux-accent) !important;
  border-radius: 0 !important;
  width: 80px;
  font-size: 1.6rem;
  border-right: 1px solid var(--crux-border);
}
.info-box .info-box-icon.bg-info { color: var(--crux-info) !important; }
.info-box .info-box-icon.bg-secondary { color: var(--crux-accent) !important; }
.info-box .info-box-icon.bg-success { color: var(--crux-accent) !important; }
.info-box .info-box-icon.bg-warning { color: var(--crux-warning) !important; }
.info-box .info-box-icon.bg-danger { color: var(--crux-danger) !important; }

.info-box .info-box-content {
  padding: 1rem 1.25rem;
}
.info-box .info-box-text {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--crux-text-muted);
  font-weight: 600;
}
.info-box .info-box-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--crux-text);
  letter-spacing: -0.02em;
  margin-top: 4px;
}

/* ============ Buttons ============ */
.btn {
  border-radius: var(--crux-radius-sm);
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  letter-spacing: 0.005em;
  transition: all var(--crux-trans);
  border-width: 1px;
  box-shadow: none;
}

.btn-primary,
.dark-mode .btn-primary {
  background: var(--crux-accent) !important;
  border-color: var(--crux-accent) !important;
  color: #000 !important;
  font-weight: 700;
  box-shadow: 0 0 0 0 var(--crux-glow);
}
.btn-primary:hover,
.btn-primary:focus,
.dark-mode .btn-primary:hover {
  background: var(--crux-accent-h) !important;
  border-color: var(--crux-accent-h) !important;
  color: #000 !important;
  box-shadow: 0 0 24px -2px var(--crux-glow);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary.disabled, .btn-primary:disabled { opacity: 0.5; }

.btn-secondary,
.dark-mode .btn-secondary {
  background: var(--crux-bg-elevated) !important;
  border-color: var(--crux-border) !important;
  color: var(--crux-text) !important;
}
.btn-secondary:hover { background: var(--crux-bg-hover) !important; border-color: #2a2a2a !important; color: var(--crux-text) !important; }

.btn-info,
.dark-mode .btn-info {
  background: var(--crux-bg-elevated) !important;
  border: 1px solid var(--crux-border) !important;
  color: var(--crux-text) !important;
  box-shadow: none !important;
}
.btn-info:hover { background: var(--crux-bg-hover) !important; border-color: var(--crux-accent) !important; color: var(--crux-accent) !important; }

.btn-warning,
.dark-mode .btn-warning {
  background: var(--crux-bg-elevated) !important;
  border: 1px solid var(--crux-warning) !important;
  color: var(--crux-warning) !important;
  box-shadow: none !important;
}
.btn-warning:hover { background: var(--crux-warning) !important; color: #000 !important; }

.btn-danger,
.dark-mode .btn-danger {
  background: var(--crux-bg-elevated) !important;
  border: 1px solid var(--crux-danger) !important;
  color: var(--crux-danger) !important;
  box-shadow: none !important;
}
.btn-danger:hover { background: var(--crux-danger) !important; color: #fff !important; border-color: var(--crux-danger) !important; }

.btn-success {
  background: var(--crux-accent) !important;
  border-color: var(--crux-accent) !important;
  color: #000 !important;
}

.btn-block { width: 100%; }
.btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8rem; }

.btn-outline-danger { color: var(--crux-danger); border-color: var(--crux-danger); background: transparent; }
.btn-outline-danger:hover { background: var(--crux-danger); color: #fff; }

/* ============ Forms ============ */
.form-control,
.dark-mode .form-control,
.dark-mode .input-group-text,
.dark-mode .custom-select {
  background: var(--crux-bg) !important;
  border: 1px solid var(--crux-border) !important;
  color: var(--crux-text) !important;
  border-radius: var(--crux-radius-sm) !important;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  transition: border-color var(--crux-trans), box-shadow var(--crux-trans);
  box-shadow: none !important;
}
.form-control::placeholder { color: var(--crux-text-dim); }
.form-control:focus {
  background: var(--crux-bg) !important;
  border-color: var(--crux-accent) !important;
  box-shadow: 0 0 0 3px var(--crux-accent-dim) !important;
  color: var(--crux-text) !important;
}

.input-group-text,
.dark-mode .input-group-text {
  background: var(--crux-bg-elevated) !important;
  border-color: var(--crux-border) !important;
  color: var(--crux-text-muted) !important;
}

.input-group .form-control { border-right: 0 !important; }
.input-group-append .input-group-text {
  border-left: 0 !important;
  border-top-right-radius: var(--crux-radius-sm) !important;
  border-bottom-right-radius: var(--crux-radius-sm) !important;
}

label:not(.form-check-label):not(.custom-file-label) {
  color: var(--crux-text);
  font-weight: 500;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}

.form-control.is-invalid { border-color: var(--crux-danger) !important; }
.invalid-feedback, .text-danger { color: var(--crux-danger) !important; }

.icheck-primary input[type=checkbox] + label:before,
.icheck-primary input[type=radio] + label:before {
  background: var(--crux-bg-elevated) !important;
  border-color: var(--crux-border) !important;
}
.icheck-primary > input:first-child:checked + label:before {
  background: var(--crux-accent) !important;
  border-color: var(--crux-accent) !important;
}

/* ============ Dropdowns ============ */
.dropdown-menu,
.dark-mode .dropdown-menu {
  background: var(--crux-bg-elevated) !important;
  border: 1px solid var(--crux-border) !important;
  border-radius: var(--crux-radius-sm) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  padding: 0.4rem;
  margin-top: 6px !important;
}
.dropdown-item,
.dark-mode .dropdown-item {
  color: var(--crux-text) !important;
  border-radius: 6px;
  padding: 0.55rem 0.85rem;
  font-size: 0.88rem;
  transition: background var(--crux-trans);
}
.dropdown-item:hover,
.dark-mode .dropdown-item:hover {
  background: var(--crux-bg-hover) !important;
  color: var(--crux-accent) !important;
}
.dropdown-item i { width: 16px; text-align: center; opacity: 0.7; margin-right: 6px; }
.dropdown-divider { border-color: var(--crux-border) !important; margin: 0.4rem 0; }

/* ============ Modals ============ */
.modal-content {
  background: var(--crux-bg-card) !important;
  border: 1px solid var(--crux-border) !important;
  border-radius: var(--crux-radius) !important;
  color: var(--crux-text);
}
.modal-header,
.dark-mode .modal-header {
  background: var(--crux-bg-card) !important;
  border-bottom: 1px solid var(--crux-border) !important;
  border-radius: var(--crux-radius) var(--crux-radius) 0 0 !important;
  padding: 1.1rem 1.5rem;
}
.modal-title { font-weight: 700; color: var(--crux-text); }
.modal-body,
.dark-mode .modal-body {
  background: var(--crux-bg-card) !important;
  padding: 1.5rem;
}
.modal-footer,
.dark-mode .modal-footer {
  background: var(--crux-bg-card) !important;
  border-top: 1px solid var(--crux-border) !important;
  border-radius: 0 0 var(--crux-radius) var(--crux-radius) !important;
  padding: 1rem 1.5rem;
}
.close { color: var(--crux-text-muted); opacity: 0.7; text-shadow: none; }
.close:hover { color: var(--crux-text); opacity: 1; }

/* ============ Alerts / Callouts ============ */
.alert {
  border-radius: var(--crux-radius-sm);
  border: 1px solid var(--crux-border);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
}
.alert-success {
  background: rgba(0, 255, 136, 0.08) !important;
  border-color: rgba(0, 255, 136, 0.25) !important;
  color: var(--crux-accent) !important;
}
.alert-danger {
  background: rgba(255, 71, 87, 0.08) !important;
  border-color: rgba(255, 71, 87, 0.25) !important;
  color: var(--crux-danger) !important;
}
.alert-warning {
  background: rgba(255, 165, 2, 0.08) !important;
  border-color: rgba(255, 165, 2, 0.25) !important;
  color: var(--crux-warning) !important;
}
.alert-info {
  background: rgba(77, 171, 247, 0.08) !important;
  border-color: rgba(77, 171, 247, 0.25) !important;
  color: var(--crux-info) !important;
}

.callout {
  background: var(--crux-bg-card) !important;
  border: 1px solid var(--crux-border) !important;
  border-radius: var(--crux-radius-sm);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.callout-danger { border-left: 3px solid var(--crux-danger) !important; }
.callout-warning { border-left: 3px solid var(--crux-warning) !important; }
.callout-info { border-left: 3px solid var(--crux-info) !important; }
.callout-success { border-left: 3px solid var(--crux-accent) !important; }

/* ============ Badges ============ */
.badge {
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.badge-success {
  background: rgba(0, 255, 136, 0.15) !important;
  color: var(--crux-accent) !important;
  border: 1px solid rgba(0, 255, 136, 0.3);
}
.badge-danger {
  background: rgba(255, 71, 87, 0.15) !important;
  color: var(--crux-danger) !important;
  border: 1px solid rgba(255, 71, 87, 0.3);
}
.badge-warning {
  background: rgba(255, 165, 2, 0.15) !important;
  color: var(--crux-warning) !important;
  border: 1px solid rgba(255, 165, 2, 0.3);
}
.badge-info {
  background: rgba(77, 171, 247, 0.15) !important;
  color: var(--crux-info) !important;
  border: 1px solid rgba(77, 171, 247, 0.3);
}

/* ============ Tables ============ */
.table {
  color: var(--crux-text);
  background: transparent;
}
.table th {
  border-bottom: 1px solid var(--crux-border) !important;
  border-top: none !important;
  color: var(--crux-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 0.85rem 0.75rem;
}
.table td {
  border-top: 1px solid var(--crux-border) !important;
  padding: 0.85rem 0.75rem;
  vertical-align: middle;
}
.dark-mode .table-hover tbody tr:hover {
  background: var(--crux-bg-hover) !important;
  color: var(--crux-text);
}

/* ============ List Groups ============ */
.list-group { background: transparent; }
.list-group-item,
.dark-mode .list-group-item {
  background: transparent !important;
  border-color: var(--crux-border) !important;
  color: var(--crux-text);
  padding: 0.85rem 0;
}
.list-group-flush .list-group-item:first-child { border-top: 0; }

/* ============ Breadcrumbs ============ */
.breadcrumb {
  background: transparent;
  padding: 0;
  font-size: 0.85rem;
  margin: 0;
}
.breadcrumb-item, .breadcrumb-item a {
  color: var(--crux-text-muted) !important;
}
.breadcrumb-item a:hover { color: var(--crux-accent) !important; }
.breadcrumb-item.active { color: var(--crux-text); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--crux-text-dim); }

/* ============ Footer ============ */
.main-footer {
  background: var(--crux-bg) !important;
  border-top: 1px solid var(--crux-border) !important;
  color: var(--crux-text-muted);
  padding: 1rem 1.5rem;
  font-size: 0.85rem;
}
.main-footer a { color: var(--crux-text-muted); }
.main-footer a:hover { color: var(--crux-accent); }
.main-footer b { color: var(--crux-text); }

/* ============ Pagination ============ */
.page-link,
.dark-mode .page-link {
  background: var(--crux-bg-card) !important;
  border-color: var(--crux-border) !important;
  color: var(--crux-text-muted) !important;
}
.page-link:hover { background: var(--crux-bg-hover) !important; color: var(--crux-accent) !important; }
.page-item.active .page-link {
  background: var(--crux-accent) !important;
  border-color: var(--crux-accent) !important;
  color: #000 !important;
}

/* ============ Tabs ============ */
.dark-mode .nav-tabs { border-bottom: 1px solid var(--crux-border); }
.dark-mode .nav-tabs .nav-link {
  color: var(--crux-text-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.6rem 1rem;
  background: transparent !important;
  font-weight: 500;
}
.dark-mode .nav-tabs .nav-link:hover { color: var(--crux-text); }
.dark-mode .nav-tabs .nav-link.active,
.dark-mode .nav-tabs .nav-item.show .nav-link {
  color: var(--crux-accent) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--crux-accent);
}

/* ============ Login / Register Pages ============ */
body.login-page,
body.register-page {
  background: var(--crux-bg) !important;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(0, 255, 136, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(0, 255, 136, 0.04) 0%, transparent 40%);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  font-family: var(--crux-font);
}

.login-box, .register-box {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}
.register-box { max-width: 460px; }

.login-box .card,
.register-box .card,
body.login-page .card.card-outline.card-primary,
body.register-page .card.card-outline.card-primary {
  background: var(--crux-bg-card) !important;
  border: 1px solid var(--crux-border) !important;
  border-top: 1px solid var(--crux-border) !important;
  border-radius: var(--crux-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--crux-border);
  overflow: hidden;
}

.login-box .card-header,
.register-box .card-header {
  background: var(--crux-bg-card) !important;
  border-bottom: 1px solid var(--crux-border) !important;
  text-align: center;
  padding: 2rem 1.5rem 1rem;
}

.crux-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0;
}
.crux-auth-brand img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  filter: drop-shadow(0 0 24px var(--crux-glow));
}
.crux-auth-brand .crux-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--crux-text);
  margin: 0;
}
.crux-auth-brand .crux-name span { color: var(--crux-accent); }
.crux-auth-brand .crux-tagline {
  font-size: 0.85rem;
  color: var(--crux-text-muted);
  font-weight: 500;
  margin: -2px 0 0;
}

.login-box .card-body,
.register-box .card-body {
  padding: 1.5rem !important;
  background: var(--crux-bg-card) !important;
}

.login-box-msg, .register-box-msg {
  color: var(--crux-text-muted);
  text-align: center;
  font-size: 0.88rem;
  padding: 0.5rem 0 1.25rem;
  margin: 0;
}

.login-box .form-group,
.register-box .form-group { margin-bottom: 1rem; }

.login-box .btn-primary,
.register-box .btn-primary {
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  width: 100%;
  margin-top: 0.5rem;
}

.login-box .row .col-4,
.register-box .row .col-4 { flex: 0 0 100%; max-width: 100%; }
.login-box .row .col-8 { flex: 0 0 100%; max-width: 100%; margin-bottom: 0.75rem; }

.login-box p, .register-box p { text-align: center; font-size: 0.85rem; }
.login-box a, .register-box a { color: var(--crux-text-muted); }
.login-box a:hover, .register-box a:hover { color: var(--crux-accent); }

.fixed-bottom {
  background: transparent;
  padding: 1rem;
  font-size: 0.8rem;
  color: var(--crux-text-dim);
}
.fixed-bottom a { color: var(--crux-text-dim) !important; }
.fixed-bottom a:hover { color: var(--crux-text-muted) !important; }

/* ============ Server Cards (servers/index) ============ */
.crux-server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 0.5rem;
}
.crux-server-card {
  background: var(--crux-bg-card);
  border: 1px solid var(--crux-border);
  border-radius: var(--crux-radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  transition: border-color var(--crux-trans), transform var(--crux-trans);
}
.crux-server-card:hover {
  border-color: #2a2a2a;
  transform: translateY(-2px);
}
.crux-server-card .crux-server-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--crux-border);
}
.crux-server-card .crux-server-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--crux-text);
  letter-spacing: -0.01em;
  margin: 0;
}
.crux-server-card .crux-server-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
}
.crux-server-card .crux-server-row .crux-label {
  color: var(--crux-text-muted);
  font-weight: 500;
}
.crux-server-card .crux-server-row .crux-value {
  color: var(--crux-text);
  font-weight: 500;
  text-align: right;
}
.crux-server-card .crux-server-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--crux-border);
}
.crux-server-card .crux-server-actions .btn { flex: 1; padding: 0.5rem; }

.crux-empty-state {
  background: var(--crux-bg-card);
  border: 1px dashed var(--crux-border);
  border-radius: var(--crux-radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--crux-text-muted);
}
.crux-empty-state i { font-size: 3rem; color: var(--crux-text-dim); display: block; margin-bottom: 1rem; }
.crux-empty-state h4 { color: var(--crux-text); margin-bottom: 0.5rem; }

/* ============ Toolbar (servers index actions row) ============ */
.crux-toolbar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

/* ============ Misc / Plugin overrides ============ */
.dark-mode .select2-selection--single,
.dark-mode .select2-selection--multiple {
  background: var(--crux-bg) !important;
  border: 1px solid var(--crux-border) !important;
  color: var(--crux-text);
  border-radius: var(--crux-radius-sm) !important;
}
.dark-mode .select2-dropdown,
.dark-mode .select2-search--dropdown,
.dark-mode .select2-search__field {
  background: var(--crux-bg-elevated) !important;
  border-color: var(--crux-border) !important;
  color: var(--crux-text);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--crux-bg-hover) !important;
  color: var(--crux-accent) !important;
}

hr { border-color: var(--crux-border) !important; }

/* Sweetalert dark popup */
.swal2-popup.swal2-modal {
  background: var(--crux-bg-card) !important;
  border: 1px solid var(--crux-border) !important;
  border-radius: var(--crux-radius) !important;
  color: var(--crux-text) !important;
}
.swal2-title, .swal2-html-container { color: var(--crux-text) !important; }
.swal2-styled.swal2-confirm {
  background: var(--crux-accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border-radius: var(--crux-radius-sm) !important;
}
.swal2-styled.swal2-cancel {
  background: var(--crux-bg-elevated) !important;
  color: var(--crux-text) !important;
  border-radius: var(--crux-radius-sm) !important;
}

/* ============ Mobile / Responsive ============ */
@media (max-width: 991.98px) {
  .main-sidebar { width: 250px !important; transform: translateX(-250px); transition: transform 0.25s ease; }
  body.sidebar-open .main-sidebar { transform: translateX(0); }
  body:not(.sidebar-mini-md) .content-wrapper,
  body:not(.sidebar-mini-md) .main-footer,
  body:not(.sidebar-mini-md) .main-header { margin-left: 0 !important; }
  .content-header { padding: 1rem; }
  .crux-server-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
  .crux-auth-brand img { width: 60px; height: 60px; }
  .crux-auth-brand .crux-name { font-size: 1.25rem; }
  .login-box .card-header, .register-box .card-header { padding: 1.5rem 1rem 0.5rem; }
  .login-box .card-body, .register-box .card-body { padding: 1.25rem !important; }
}