: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-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; }