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

:root {
  --ascs-bg: #0a0a0f;
  --ascs-bg-2: #0f0f18;
  --ascs-card: #14141e;
  --ascs-card-hover: #1c1c2a;
  --ascs-border: #1e1e30;
  --ascs-border-2: #2e2e44;
  --ascs-text: #f0f0f8;
  --ascs-text-2: #b0b0c8;
  --ascs-muted: #78789a;
  --ascs-accent: #818cf8;
  --ascs-accent-2: #a5b4fc;
  --bs-primary: #818cf8;
  --bs-primary-rgb: 129, 140, 248;
  --bs-link-color: #818cf8;
  --bs-link-color-rgb: 129, 140, 248;
  --bs-link-hover-color: #a5b4fc;
}

/* Base surfaces - applied regardless of Kuma's light/dark class so the
   login, dashboard and status pages all share the ASCS look.
   Status/ping colors (green/red/yellow) are intentionally left untouched. */
html, body {
  background-color: var(--ascs-bg) !important;
  color: var(--ascs-text) !important;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Sidebar */
.sidebar { background-color: var(--ascs-bg-2) !important; border-color: var(--ascs-border) !important; }
.sidebar .danger-zone { border-top-color: var(--ascs-border) !important; }

/* Cards / lists / modals / dropdowns */
.shadow-box:not(.alert) {
  background-color: var(--ascs-card) !important;
  border: 1px solid var(--ascs-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
.list-group .list-group-item,
.list-group-item {
  background-color: var(--ascs-card) !important;
  color: var(--ascs-text) !important;
  border-color: var(--ascs-border) !important;
}
.card { background-color: var(--ascs-card) !important; border-color: var(--ascs-border) !important; color: var(--ascs-text) !important; }
.modal-content { background-color: var(--ascs-card) !important; border: 1px solid var(--ascs-border) !important; }
.modal-header, .modal-footer { border-color: var(--ascs-border) !important; }
.dropdown-menu { background-color: var(--ascs-card) !important; border-color: var(--ascs-border) !important; color: var(--ascs-text) !important; }
.dropdown-menu .dropdown-item { color: var(--ascs-text-2) !important; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus { background-color: var(--ascs-card-hover) !important; color: var(--ascs-text) !important; }
.accordion-item { background-color: var(--ascs-card) !important; border-color: var(--ascs-border) !important; color: var(--ascs-text) !important; }
.accordion-button { background-color: var(--ascs-card) !important; color: var(--ascs-text) !important; }

/* Form controls */
.form-control, .form-select,
.form-control:focus, .form-select:focus {
  background-color: var(--ascs-bg-2) !important;
  border-color: var(--ascs-border) !important;
  color: var(--ascs-text) !important;
}
.form-control::placeholder { color: var(--ascs-muted) !important; }
.input-group-text { background-color: var(--ascs-card) !important; border-color: var(--ascs-border) !important; color: var(--ascs-text-2) !important; }

/* Buttons (semantic btn-success / btn-danger / btn-warning left as-is) */
.btn-normal { background-color: var(--ascs-card) !important; border-color: var(--ascs-border) !important; color: var(--ascs-text) !important; }
.btn-normal:hover { background-color: var(--ascs-card-hover) !important; border-color: var(--ascs-border-2) !important; }
.btn-primary { background-color: var(--ascs-accent) !important; border-color: var(--ascs-accent) !important; color: #0a0a0f !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--ascs-accent-2) !important; border-color: var(--ascs-accent-2) !important; }
.btn-outline-secondary { color: var(--ascs-text-2) !important; border-color: var(--ascs-border-2) !important; }
.btn-outline-secondary:hover { background-color: var(--ascs-card-hover) !important; color: var(--ascs-text) !important; }

/* Links */
a:not(.btn) { color: var(--ascs-text-2) !important; }
a:not(.btn):hover { color: var(--ascs-accent-2) !important; }

/* Nav (non-status) */
.nav-link { color: var(--ascs-text-2) !important; }
.nav-link:hover { background-color: var(--ascs-card-hover) !important; color: var(--ascs-text) !important; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--ascs-accent) !important; color: #0a0a0f !important; }

/* Tables */
.table { color: var(--ascs-text-2) !important; }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--ascs-card-hover); color: var(--ascs-text) !important; }
.table > :not(caption) > * > * { border-color: var(--ascs-border) !important; }
.pagination .page-link { background-color: var(--ascs-card) !important; border-color: var(--ascs-border) !important; color: var(--ascs-text-2) !important; }

/* Muted text + rules */
.text-muted, .muted { color: var(--ascs-muted) !important; }
hr { border-color: var(--ascs-border) !important; }

/* Status semantic colors kept (up = green, down = red, pending = yellow) */
.overall-status .ok, .text-success { color: #22c55e !important; }
.overall-status .warning, .text-warning { color: #f59e0b !important; }
.overall-status .danger, .text-danger { color: #ef4444 !important; }

/* Scrollbar */
::-webkit-scrollbar-thumb { background: var(--ascs-border-2) !important; }