/* ═══════════════════════════════════════════
   Cyanhost Dashboard — Global Theme (Dark)
═══════════════════════════════════════════ */

/* ── CSS variables ───────────────────────── */
:root {
  color-scheme: dark;

  --cy-bg:          #0c0c0e;   /* page / sidebar background */
  --cy-surface:     #18181c;   /* cards, panels */
  --cy-surface-2:   #222228;   /* elevated surfaces, dropdowns */
  --cy-border:      rgba(255,255,255,0.08);
  --cy-border-soft: rgba(255,255,255,0.05);
  --cy-accent:      #3c56d8;   /* primary blue */
  --cy-accent-h:    #2f45c0;   /* hover */
  --cy-text:        rgba(255,255,255,0.82);
  --cy-text-muted:  rgba(255,255,255,0.45);
  --cy-text-dim:    rgba(255,255,255,0.3);

  --bs-body-bg:               var(--cy-bg);
  --bs-body-color:            var(--cy-text);
  --bs-dropdown-bg:           var(--cy-surface-2);
  --bs-dropdown-border-color: var(--cy-border);
  --bs-dropdown-color:        var(--cy-text);
  --bs-dropdown-link-color:   var(--cy-text);
  --bs-dropdown-link-hover-color:  #fff;
  --bs-dropdown-link-hover-bg:     rgba(255,255,255,0.07);
  --bs-dropdown-link-active-bg:    var(--cy-accent);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-divider-bg:   var(--cy-border);

  --sb-track:       var(--cy-bg);
  --sb-thumb:       rgba(255,255,255,0.12);
  --sb-thumb-hover: rgba(255,255,255,0.2);
  --sb-width: 6px;
}

/* ── Base ────────────────────────────────── */
html, body,
html.dark, html.dark body {
  background-color: var(--cy-bg) !important;
  color: var(--cy-text);
}

/* ── Page container / main ───────────────── */
#main-container,
#page-container,
.content,
.bg-body-light, .bg-body, .bg-dark-op,
.content-boxed > .block, .side-content,
#page-container > #main-container,
html.dark body, html.dark #page-container {
  background-color: var(--cy-bg) !important;
}
.content { background-color: transparent !important; }

/* ── Top header bar ──────────────────────── */
#page-header {
  background: var(--cy-surface) !important;
  border-bottom: 1px solid var(--cy-border) !important;
  box-shadow: none !important;
}
#page-header .content-header { min-height: 60px !important; height: 60px !important; }
#page-header .btn-alt-secondary {
  background: transparent !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text-muted) !important;
}
#page-header .btn-alt-secondary:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--cy-text) !important;
}
#page-header .dropdown-menu {
  background: var(--cy-surface-2) !important;
  border: 1px solid var(--cy-border) !important;
}
#page-header .dropdown-item { color: var(--cy-text) !important; }
#page-header .dropdown-item:hover { background: rgba(255,255,255,0.07) !important; }
#page-header .p-3.text-center.bg-body-light {
  background: var(--cy-surface) !important;
  border-color: var(--cy-border) !important;
}

/* ── Blocks / cards ──────────────────────── */
.block {
  background: var(--cy-surface) !important;
  border-color: var(--cy-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}
.block.bg-transparent, .block.bg-dark, .block-rounded.bg-transparent {
  background: transparent !important;
  overflow: visible !important;
}
.block-header, .block-header-default,
html.dark .block .block-header-default {
  background: rgba(255,255,255,0.025) !important;
  background-color: rgba(255,255,255,0.025) !important;
  border-bottom-color: var(--cy-border) !important;
}
html.dark .block {
  background-color: var(--cy-surface) !important;
  box-shadow: none !important;
}
.block-title {
  color: var(--cy-text-muted) !important;
  font-size: .72rem !important;
  letter-spacing: .07em !important;
}

/* ── Block spacing ───────────────────────── */
.block-content { padding-bottom: 1.25rem !important; }
.block-content.p-0 { padding-bottom: 1.25rem !important; }
.table-responsive { border-radius: 0 0 8px 8px; overflow: hidden; }

/* ── Tables ──────────────────────────────── */
html.dark .table,
.table-premium,
.table-dark {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(255,255,255,0.03);
  --bs-table-active-bg: rgba(255,255,255,0.05);
  --bs-table-border-color: var(--cy-border-soft);
  --bs-table-color: var(--cy-text);
  --bs-table-striped-bg: transparent;
  color: var(--cy-text);
  border-color: var(--cy-border-soft);
}
html.dark .table,
.table-premium, .table-premium tbody, .table-premium tbody tr,
.table-dark,    .table-dark tbody,    .table-dark tbody tr {
  background: transparent !important;
  background-color: transparent !important;
}
.table-premium thead th, .table-dark thead th {
  background: rgba(255,255,255,0.03) !important;
  background-color: rgba(255,255,255,0.03) !important;
  color: var(--cy-text-dim) !important;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--cy-border) !important;
  padding: 0.75rem 1rem;
  font-weight: 600;
}
.table-premium tbody tr {
  transition: background 0.12s;
  border-bottom: 1px solid var(--cy-border-soft) !important;
}
.table-premium tbody tr:hover { background: rgba(255,255,255,0.025) !important; }
.table-premium td {
  padding: 0.9rem 1rem;
  vertical-align: middle;
  color: var(--cy-text);
  border-color: var(--cy-border-soft) !important;
}
.table-dark td, .table-dark th { border-color: var(--cy-border-soft) !important; }

/* ── Status badges ───────────────────────── */
.badge-status {
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
  border-radius: 5px;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
}
.badge-running  { background: #16a34a; color: #fff; }
.badge-stopped  { background: #dc2626; color: #fff; }
.badge-waiting  { background: #d97706; color: #fff; }
.badge-info     { background: var(--cy-accent); color: #fff; }

/* ── Buttons ─────────────────────────────── */
.btn-admin, .btn-primary {
  background: var(--cy-accent) !important;
  border-color: var(--cy-accent) !important;
  color: #fff !important;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}
.btn-admin:hover, .btn-primary:hover {
  background: var(--cy-accent-h) !important;
  border-color: var(--cy-accent-h) !important;
  color: #fff !important;
}
.btn-alt-secondary, .btn-outline-secondary {
  background: transparent !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text-muted) !important;
}
.btn-alt-secondary:hover, .btn-outline-secondary:hover {
  background: rgba(255,255,255,0.07) !important;
  color: var(--cy-text) !important;
}
.btn-alt-primary {
  background: rgba(60,86,216,0.15) !important;
  border-color: rgba(60,86,216,0.3) !important;
  color: #818cf8 !important;
}
.btn-alt-primary:hover {
  background: rgba(60,86,216,0.25) !important;
  color: #a5b4fc !important;
}

/* ── Server icon ─────────────────────────── */
.server-icon-wrapper {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60,86,216,0.12);
  border-radius: 10px;
  color: #818cf8;
}
.server-icon-wrapper.warning {
  background: rgba(217,119,6,0.12);
  color: #fbbf24;
}

/* ── Modals ──────────────────────────────── */
.modal-content {
  background: var(--cy-surface) !important;
  border: 1px solid var(--cy-border) !important;
  border-radius: 12px !important;
}
.modal-header, .modal-footer {
  border-color: var(--cy-border) !important;
  background: transparent !important;
}

/* ── Forms ───────────────────────────────── */
.form-control, .form-select {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text) !important;
}
select option, select option:checked {
  background-color: var(--cy-surface-2);
  color: var(--cy-text);
}
.form-control:focus, .form-select:focus {
  background-color: rgba(255,255,255,0.07) !important;
  border-color: var(--cy-accent) !important;
  box-shadow: 0 0 0 3px rgba(60,86,216,0.2) !important;
  color: #fff !important;
}
.form-control::placeholder { color: var(--cy-text-dim) !important; }
.input-group-text {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text-muted) !important;
}
label { color: var(--cy-text-muted); }

/* ── Dropdowns ───────────────────────────── */
.dropdown-menu,
html .dropdown-menu,
html.dark .dropdown-menu {
  --bs-dropdown-bg:                var(--cy-surface-2) !important;
  --bs-dropdown-border-color:      var(--cy-border) !important;
  --bs-dropdown-color:             var(--cy-text) !important;
  --bs-dropdown-link-color:        var(--cy-text) !important;
  --bs-dropdown-link-hover-color:  #fff !important;
  --bs-dropdown-link-hover-bg:     rgba(255,255,255,0.07) !important;
  --bs-dropdown-link-active-bg:    var(--cy-accent) !important;
  --bs-dropdown-link-active-color: #fff !important;
  background-color: var(--cy-surface-2) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
html .dropdown-item, html.dark .dropdown-item, .dropdown-item {
  color: var(--cy-text) !important;
  background-color: transparent !important;
}
html .dropdown-item:hover, html.dark .dropdown-item:hover,
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}
html.dark .dropdown-item.active, .dropdown-item.active,
html.dark .dropdown-item:active, .dropdown-item:active {
  background-color: var(--cy-accent) !important;
  color: #fff !important;
}
.dropdown-divider { border-color: var(--cy-border) !important; }
.dropdown-header  { color: var(--cy-text-dim) !important; }

/* ── Alerts ──────────────────────────────── */
.alert-info {
  background: rgba(60,86,216,0.12) !important;
  border-color: rgba(60,86,216,0.25) !important;
  color: #a5b4fc !important;
}
.alert-danger {
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(220,38,38,0.25) !important;
  color: #fca5a5 !important;
}
.alert-success {
  background: rgba(22,163,74,0.12) !important;
  border-color: rgba(22,163,74,0.25) !important;
  color: #86efac !important;
}
.alert-warning {
  background: rgba(217,119,6,0.12) !important;
  border-color: rgba(217,119,6,0.25) !important;
  color: #fcd34d !important;
}

/* ── Nav tabs ────────────────────────────── */
.nav-tabs {
  border-color: var(--cy-border) !important;
}
.nav-tabs .nav-link {
  color: var(--cy-text-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--cy-text) !important; }
.nav-tabs .nav-link.active {
  color: #fff !important;
  background: var(--cy-surface) !important;
  border-color: var(--cy-border) var(--cy-border) var(--cy-surface) !important;
}

/* ── Badges ──────────────────────────────── */
.badge.bg-primary, .badge.bg-info { background-color: var(--cy-accent) !important; }
.badge.bg-success { background-color: #16a34a !important; }
.badge.bg-danger  { background-color: #dc2626 !important; }
.badge.bg-warning { background-color: #d97706 !important; color: #fff !important; }
.badge.bg-secondary { background-color: rgba(255,255,255,0.1) !important; color: var(--cy-text-muted) !important; }

/* ── List groups ─────────────────────────── */
.list-group-item {
  background: transparent !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text) !important;
}
.list-group-item:hover { background: rgba(255,255,255,0.03) !important; }

/* ── Pagination ──────────────────────────── */
.page-link {
  background: var(--cy-surface) !important;
  border-color: var(--cy-border) !important;
  color: var(--cy-text-muted) !important;
}
.page-link:hover {
  background: rgba(255,255,255,0.07) !important;
  color: #fff !important;
}
.page-item.active .page-link {
  background: var(--cy-accent) !important;
  border-color: var(--cy-accent) !important;
  color: #fff !important;
}

/* ── Progress bars ───────────────────────── */
.progress {
  background: rgba(255,255,255,0.07) !important;
  border-radius: 999px;
}
.progress-bar { background: var(--cy-accent) !important; }

/* ── Code / pre ──────────────────────────── */
code, pre {
  background: rgba(255,255,255,0.06) !important;
  color: #a5b4fc !important;
  border-radius: 5px;
}

/* ── Text utilities override ─────────────── */
.text-muted { color: var(--cy-text-muted) !important; }
.text-dark   { color: var(--cy-text) !important; }

/* ── OneUI status banner ─────────────────── */
#status-banner .badge.bg-white,
#status-banner .badge.text-dark { color: #000 !important; font-weight: 600; }

/* ── Custom scrollbar ────────────────────── */
::-webkit-scrollbar              { width: var(--sb-width); height: var(--sb-width); }
::-webkit-scrollbar-track        { background: var(--sb-track); border-radius: 999px; }
::-webkit-scrollbar-thumb        { background: var(--sb-thumb); border-radius: 999px; border: 2px solid var(--sb-track); transition: background 0.2s; }
::-webkit-scrollbar-thumb:hover  { background: var(--sb-thumb-hover); }
::-webkit-scrollbar-corner       { background: var(--sb-track); }
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); }

/* ── Empty servers state ─────────────────── */
.no-servers-icons {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.25rem;
  height: 72px;
}
.ns-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--cy-border);
  color: rgba(255,255,255,.3);
  font-size: 1.5rem;
  animation: ns-float 3s ease-in-out infinite;
}
.ns-icon-1 { animation-delay: 0s;   animation-duration: 3.2s; }
.ns-icon-2 { animation-delay: .6s;  animation-duration: 2.8s; height: 64px; width: 64px; font-size: 1.75rem; color: rgba(255,255,255,.5); background: rgba(60,86,216,.15); border-color: rgba(60,86,216,.3); }
.ns-icon-3 { animation-delay: 1.1s; animation-duration: 3.5s; }
@keyframes ns-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Page header widget ──────────────────── */
.cy-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 0.1rem 0 0.6rem;
}
.cy-page-header-left { display: flex; align-items: center; gap: 0.75rem; }
.cy-ph-icon {
  width: 38px; height: 38px;
  background: rgba(60,86,216,0.18);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: #818cf8;
  font-size: 0.95rem;
}
.cy-ph-title { font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.25; }
.cy-ph-sub   { font-size: 0.78rem; color: var(--cy-text-muted); margin: 2px 0 0; }

/* ── CSP: CSS replacements for removed inline onmouseover/onmouseout ── */
.js-proj-btn:hover { color: rgba(255,255,255,0.7) !important; }
.svl-proj-dropdown button:hover { background: rgba(255,255,255,0.06) !important; }
.js-hover-border:hover { border-color: rgba(59,130,246,0.5) !important; }

/* ── bl-tabs: shared tab pill bar (billing, profile, admin nav) ── */
.bl-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: #18181c;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 5px;
}
.bl-tab {
  flex: 0 1 auto;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: .5rem .75rem; border-radius: 7px; text-decoration: none !important;
  font-size: .82rem; font-weight: 500;
  color: rgba(255,255,255,0.4); transition: background .12s, color .12s;
  white-space: nowrap;
}
.bl-tab:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); }
.bl-tab.active { background: #3c56d8; color: #fff !important; font-weight: 600; }
.bl-tab i { font-size: .78rem; }
@media (max-width: 680px) { .bl-tab-label { display: none; } }
.bl-tabs-fill .bl-tab { flex: 1; }