/* ═══════════════════════════════════════════
   guldkage - Dashboard — Global Theme
═══════════════════════════════════════════ */

/* ── Background ─────────────────────────── */
:root {
  color-scheme: dark;
  background-color: #111111;
  --bs-body-bg: #111111;
  --bs-body-color: #c9d1d9;
  --bs-dropdown-bg: #1f1f1f;
  --bs-dropdown-border-color: rgba(255,255,255,0.08);
  --bs-dropdown-color: #c9d1d9;
  --bs-dropdown-link-color: #c9d1d9;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.06);
  --bs-dropdown-link-active-bg: #1d6fd8;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-divider-bg: rgba(255,255,255,0.07);
}
html, body { background-color: #111111 !important; }
html.dark, html.dark body { background-color: #111111 !important; }

/* ── Main content area ───────────────────── */
#main-container,
#page-container { background-color: #111111 !important; }
.content { background-color: transparent !important; }
/* Kill all OneUI blue-tinted backgrounds */
.bg-body-light, .bg-body, .bg-dark-op,
.content-boxed > .block, .side-content,
#page-container > #main-container { background-color: transparent !important; }
html.dark body, html.dark #page-container { background-color: #111111 !important; }

/* ── Top header bar ──────────────────────── */
#page-header {
  background: #171717 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
#page-header .content-header { min-height: 56px !important; height: 56px !important; }
#page-header .btn-alt-secondary {
  background: transparent !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #9ca3af !important;
}
#page-header .dropdown-menu {
  background: #1f1f1f !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#page-header .dropdown-item { color: #c9d1d9 !important; }
#page-header .dropdown-item:hover { background: rgba(255,255,255,0.06) !important; }
#page-header .p-3.text-center.bg-body-light { background: #252525 !important; border-color: rgba(255,255,255,0.08) !important; }

/* ── Blocks / cards ──────────────────────── */
.block {
  background: #1a1a1a !important;
  border-color: rgba(255,255,255,0.07) !important;
  border-radius: 8px !important;
  overflow: hidden !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.03) !important;
  background-color: rgba(255,255,255,0.03) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
html.dark .block {
  background-color: #1a1a1a !important;
  box-shadow: none !important;
}
.block-title { color: #9ca3af !important; font-size: .72rem !important; letter-spacing: .07em !important; }

/* ── Table-in-block bottom spacer ────────── */
.block-content.p-0 { padding-bottom: 10px !important; }
.block-content.p-0 .table tbody tr:last-child td { border-bottom: none !important; }
.table-responsive { border-radius: 0 0 8px 8px; overflow: hidden; }

/* ── Tables — override OneUI CSS variables ── */
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: rgba(255,255,255,0.05);
  --bs-table-color: #c9d1d9;
  --bs-table-striped-bg: transparent;
  color: #c9d1d9;
  border-color: rgba(255,255,255,0.05);
}
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.04) !important;
  background-color: rgba(255,255,255,0.04) !important;
  color: #6b7280 !important;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 0.8rem 1rem;
  font-weight: 600;
}
.table-premium tbody tr {
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.table-premium tbody tr:hover { background: rgba(255,255,255,0.03) !important; }
.table-premium td {
  padding: 1rem;
  vertical-align: middle;
  color: #c9d1d9;
  border-color: rgba(255,255,255,0.05) !important;
}
.table-dark td, .table-dark th { border-color: rgba(255,255,255,0.05) !important; }

/* ── Status badges ───────────────────────── */
.badge-status {
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px;
}
.badge-running  { background: #16a34a; color: #fff; }
.badge-stopped  { background: #dc2626; color: #fff; }
.badge-waiting  { background: #d97706; color: #fff; }
.badge-info     { background: #2563eb; color: #fff; }

/* ── Buttons ─────────────────────────────── */
.btn-admin {
  background: #1d6fd8;
  border: none;
  color: #fff;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-admin:hover { background: #1557b0; color: #fff; }

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

/* ── Modals ──────────────────────────────── */
.modal-content {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 12px !important;
}
.modal-header, .modal-footer {
  border-color: rgba(255,255,255,0.07) !important;
  background: transparent !important;
}

/* ── Forms ───────────────────────────────── */
.form-control, .form-select {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e2e8f0 !important;
}
select option,
select option:checked {
  background-color: #1f1f1f;
  color: #e2e8f0;
}
.form-control:focus, .form-select:focus {
  background-color: rgba(255,255,255,0.07) !important;
  border-color: #1d6fd8 !important;
  box-shadow: 0 0 0 3px rgba(29,111,216,0.2) !important;
  color: #fff !important;
}
.form-control::placeholder { color: #6b7280 !important; }
.input-group-text {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #9ca3af !important;
}

/* ── Dropdowns (global dark) ─────────────── */
.dropdown-menu,
html .dropdown-menu,
html.dark .dropdown-menu {
  --bs-dropdown-bg: #1f1f1f !important;
  --bs-dropdown-border-color: rgba(255,255,255,0.08) !important;
  --bs-dropdown-color: #c9d1d9 !important;
  --bs-dropdown-link-color: #c9d1d9 !important;
  --bs-dropdown-link-hover-color: #fff !important;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,0.06) !important;
  --bs-dropdown-link-active-bg: #1d6fd8 !important;
  --bs-dropdown-link-active-color: #fff !important;
  background-color: #1f1f1f !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #c9d1d9 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
html .dropdown-item,
html.dark .dropdown-item,
.dropdown-item { color: #c9d1d9 !important; background-color: transparent !important; }
html .dropdown-item:hover, html .dropdown-item:focus,
html.dark .dropdown-item:hover, html.dark .dropdown-item:focus,
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(255,255,255,0.06) !important; color: #fff !important; }
html.dark .dropdown-item.active, html.dark .dropdown-item:active,
.dropdown-item.active, .dropdown-item:active { background-color: #1d6fd8 !important; color: #fff !important; }
.dropdown-divider { border-color: rgba(255,255,255,0.07) !important; }
.dropdown-header { color: #6b7280 !important; }

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

/* ── Custom scrollbar ────────────────────── */
:root {
  --sb-track: #111111;
  --sb-thumb: #2a2a2a;
  --sb-thumb-hover: #3d3d3d;
  --sb-width: 6px;
}

/* Webkit (Chrome, Edge, Safari) */
::-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);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}