:root,
[data-bs-theme="dark"] {
  --bs-body-bg: #0f1218;
  --bs-tertiary-bg: #151a22;
  --bs-secondary-bg: #1b212b;
  --bs-border-color: #262e3b;
  --bs-primary: #3d8bfd;
  --bs-primary-rgb: 61, 139, 253;
  --hapm-card-bg: #151a22;
  --hapm-muted: #8a94a6;
}

body { min-height: 100vh; }
.hapm-footer { border-top: 1px solid var(--bs-border-color); color: var(--hapm-muted); }
.hapm-footer a { color: inherit; }

.hapm-navbar { backdrop-filter: blur(6px); background-color: rgba(21, 26, 34, .92) !important; }
.hapm-brand { display: block; height: 40px; width: auto; }
.hapm-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #3d8bfd, #6f42c1); color: #fff;
}
.hapm-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #2b3445; font-size: .8rem; font-weight: 600;
}
.navbar .nav-link { white-space: nowrap; }
@media (min-width: 1400px) {
  .navbar-expand-xxl .navbar-nav .nav-link { padding-left: .6rem; padding-right: .6rem; }
}
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .hapm-navbar .nav-link .bi { display: none; }
  .hapm-navbar .navbar-nav.align-items-xxl-center .bi { display: inline-block; }
}
.navbar .nav-link.active { color: #fff; }
.navbar .nav-link.active i { color: var(--bs-primary); }

.card { background-color: var(--hapm-card-bg); border-color: var(--bs-border-color); }
.card-header { background-color: rgba(255,255,255,.02); border-color: var(--bs-border-color); font-weight: 600; }

.page-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem; }
.page-title h1 { font-size: 1.5rem; margin: 0; }
.page-title .subtitle { color: var(--hapm-muted); font-size: .9rem; }

.kpi { padding: 1rem 1.25rem; }
.kpi .kpi-label { color: var(--hapm-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi .kpi-value { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi .kpi-icon { font-size: 1.6rem; opacity: .5; }

.status-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; }
.status-up { background: #2fb344; box-shadow: 0 0 6px #2fb34488; }
.status-down { background: #d63939; box-shadow: 0 0 6px #d6393988; }
.status-maint { background: #f59f00; }
.status-other { background: #6c757d; }

.hapm-pre {
  background: #0b0e13; border: 1px solid var(--bs-border-color); border-radius: .375rem;
  padding: .75rem; max-height: 480px; overflow: auto; white-space: pre-wrap; word-break: break-all;
  font-size: .8rem; color: #c9d1d9;
}
.diff-add { color: #3fb950; }
.diff-del { color: #f85149; }
.diff-hunk { color: #79c0ff; }

.CodeMirror { height: calc(100vh - 290px); min-height: 420px; border: 1px solid var(--bs-border-color); border-radius: .375rem; font-size: 13px; }
.CodeMirror.cm-small { height: 420px; }
.cm-s-material-darker.CodeMirror, .cm-s-material-darker .CodeMirror-gutters { background-color: #0b0e13; }

.table > :not(caption) > * > * { background-color: transparent; }
.table thead th { color: var(--hapm-muted); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
.table-sm td { vertical-align: middle; }

.setup-steps { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.setup-steps .step {
  flex: 1 1 120px; padding: .6rem .8rem; border-radius: .5rem; border: 1px solid var(--bs-border-color);
  color: var(--hapm-muted); font-size: .85rem; background: var(--hapm-card-bg);
}
.setup-steps .step.done { border-color: #2fb34466; color: #8fd19e; }
.setup-steps .step.current { border-color: var(--bs-primary); color: #fff; box-shadow: 0 0 0 1px var(--bs-primary) inset; }
.setup-wrap { max-width: 920px; margin: 0 auto; }

.choice-card { cursor: pointer; transition: border-color .15s, transform .15s; height: 100%; }
.choice-card:hover { border-color: var(--bs-primary); transform: translateY(-2px); }
.btn-check:checked + .choice-card { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary) inset; }

.login-wrap { max-width: 420px; margin: 8vh auto 0; }
.chart-box { position: relative; height: 260px; }
.chart-box.small { height: 180px; }
.font-mono { font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; }
.text-muted-2 { color: var(--hapm-muted) !important; }
.nowrap { white-space: nowrap; }
.server-row td { font-size: .85rem; }
.list-group-item { background-color: transparent; }
.private-key { filter: blur(5px); user-select: none; transition: filter .2s; }
.private-key.revealed { filter: none; user-select: text; }

/* audit log */
.audit-day-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--hapm-muted); margin: 0 0 .5rem .25rem; }
.audit-entry { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 1.1rem; }
.audit-icon { flex: 0 0 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.audit-body { flex: 1 1 auto; min-width: 0; }
.audit-title { color: var(--bs-emphasis-color); line-height: 1.4; }
.audit-value { font-weight: 600; font-family: SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: rgba(255,255,255,.06); padding: .05rem .35rem; border-radius: .3rem; word-break: break-all; }
.audit-meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; margin-top: .3rem; font-size: .8rem; color: var(--hapm-muted); }
.audit-user { display: inline-flex; align-items: center; gap: .35rem; }
.audit-avatar { width: 20px; height: 20px; font-size: .65rem; }
.audit-time { flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); font-size: .9rem; }
.audit-technical summary { cursor: pointer; font-size: .8rem; color: var(--bs-link-color); margin-top: .35rem; }
.audit-compact .audit-entry { padding: .65rem .9rem; gap: .75rem; }
.audit-compact .audit-icon { flex-basis: 30px; height: 30px; font-size: .9rem; border-radius: 8px; }
.override-table th:first-child, .override-table td:first-child { padding-left: 1rem; }
.override-table select { min-width: 110px; }

/* IP information dialog */
.ip-link { cursor: pointer; border-bottom: 1px dotted currentColor; }
.ipinfo-map { height: 360px; border-radius: .5rem; overflow: hidden; border: 1px solid var(--bs-border-color); }
.ipinfo-nomap { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; }
.ipinfo-map.d-none { display: none !important; }
/* dark map tiles to match the dashboard (the tiles themselves are light) */
[data-bs-theme="dark"] #ipinfo-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9); }
[data-bs-theme="dark"] #ipinfo-map .leaflet-container, [data-bs-theme="dark"] #ipinfo-map { background: #1b1f24; }
#ipinfo-modal .table th { width: 38%; }

/* availability: one bar per day */
.avail-bars { display: flex; gap: 2px; align-items: center; min-width: 120px; }
.avail-bar { display: inline-block; flex: 1 1 0; max-width: 10px; min-width: 3px; height: 18px; border-radius: 2px; }
.avail-bar.ok { background: var(--bs-success); }
.avail-bar.warn { background: var(--bs-warning); }
.avail-bar.bad { background: var(--bs-danger); }
.avail-bar.none { background: var(--bs-secondary-bg); }

/* country multi-select (js/country-picker.js) */
.country-picker-toggle { min-height: 38px; height: auto; padding-top: .3rem; padding-bottom: .1rem; }
.country-picker-menu { width: 100%; min-width: 260px; }
.country-picker-list { max-height: 300px; overflow-y: auto; }
.country-picker [hidden] { display: none !important; }
.country-picker-list .dropdown-item { cursor: pointer; padding: .3rem .5rem; white-space: normal; }

/* temporary bans inside the blacklist table */
.hapm-temp > td { background-color: rgba(224, 168, 0, .07) !important; }

/* IP list input: one line, grows with pasted lists */
textarea.ip-multi { field-sizing: content; min-height: calc(1.5em + .75rem + 2px); max-height: 12rem; resize: vertical; }

/* setup: configuration choices */
.cfg-option { cursor: pointer; }
.cfg-option:has(input[type=radio]:checked) { border-color: var(--bs-primary) !important; background: rgba(var(--bs-primary-rgb), .06); }