@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --whc-bg: #08090b;
  --whc-surface: #111317;
  --whc-surface-raised: #171a20;
  --whc-text: #f5f5f2;
  --whc-muted: #a4a6aa;
  --whc-quiet: #74777e;
  --whc-border: rgba(245, 245, 242, 0.16);
  --whc-blue: #174c91;
  --whc-blue-light: #9bc4ff;
  --whc-green: #d8ff86;
  --whc-display: "Space Grotesk", "Segoe UI", sans-serif;
  --whc-mono: "DM Mono", Consolas, monospace;
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--whc-bg);
  color: var(--whc-text);
  font-family: var(--whc-display);
}

body,
.header,
.nav-content,
.title,
.container-md,
.footer {
  color: var(--whc-text);
}

body {
  background:
    radial-gradient(ellipse at 82% 0, rgba(23, 76, 145, 0.16), transparent 42%),
    var(--whc-bg);
}

a {
  color: var(--whc-blue-light);
}

a:hover,
a:focus {
  color: #c4dcff;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--whc-blue-light);
  outline-offset: 3px;
}

.header {
  background: rgba(8, 9, 11, 0.94);
  border-bottom: 1px solid var(--whc-border);
}

.header .container-md {
  align-items: center;
  min-height: 76px;
}

.header .logo img {
  max-height: 58px;
  max-width: min(240px, 60vw);
}

.header .logo img:not(.blesta) {
  background-color: #f5f5f2;
  border-radius: 5px;
  object-fit: contain;
  padding: 4px;
}

.header .logo img.blesta {
  filter: brightness(0) invert(1);
}

.top-nav .dropdown a.dropdown-toggle {
  color: var(--whc-muted);
}

.nav-content nav.navbar {
  background: rgba(14, 16, 20, 0.98);
  border-bottom: 1px solid var(--whc-border);
}

.nav-content .navbar-nav > li > a.nav-link {
  color: var(--whc-muted);
  font-family: var(--whc-mono);
  font-size: 0.76rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.nav-content .navbar-nav > li > a.nav-link:hover,
.nav-content .navbar-nav > li > a.nav-link:focus,
.nav-content .navbar-nav > li.active > a.nav-link,
.nav-content .navbar-nav > li.show > a.nav-link {
  background: rgba(255, 255, 255, 0.06);
  color: var(--whc-text);
}

.title {
  background: linear-gradient(110deg, rgba(23, 76, 145, 0.25), rgba(17, 19, 23, 0.88) 55%);
  border-bottom: 1px solid var(--whc-border);
}

.title h3 {
  color: var(--whc-text);
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  letter-spacing: -0.055em;
  padding: 0.4rem 0;
}

.dropdown-menu {
  background: var(--whc-surface-raised);
  border: 1px solid var(--whc-border);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
}

.dropdown-menu > li > a,
.dropdown-item {
  color: var(--whc-muted);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-item:hover,
.dropdown-item:focus {
  background: rgba(255, 255, 255, 0.08);
  color: var(--whc-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--whc-text);
  font-family: var(--whc-display);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.page-header,
.section-title,
.card-header,
.panel-heading {
  border-color: var(--whc-border);
}

.card,
.card-blesta,
.panel,
.well,
.list-group-item,
.modal-content,
.popover {
  background-color: var(--whc-surface);
  border-color: var(--whc-border);
  color: var(--whc-text);
}

.card-header,
.card-blesta > .card-header,
.panel-heading,
.modal-header,
.modal-footer {
  background-color: rgba(255, 255, 255, 0.035);
  border-color: var(--whc-border);
  color: var(--whc-text);
}

.card p,
.card-blesta p,
.panel p,
.help-block,
.text-muted,
.form-text {
  color: var(--whc-muted);
}

.card-blesta > .card-header,
.panel .card-blesta > .panel-heading {
  color: var(--whc-text);
}

.list-group-item,
.list-group-item-action {
  background-color: var(--whc-surface);
  border-color: var(--whc-border);
  color: var(--whc-text);
}

.list-group-item:hover,
.list-group-item:focus,
.list-group-item.active {
  background-color: rgba(23, 76, 145, 0.5);
  border-color: var(--whc-border);
  color: #fff;
}

.form-control,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  background-color: #0e1014;
  border: 1px solid var(--whc-border);
  border-radius: 3px;
  color: var(--whc-text);
  font-family: var(--whc-display);
}

.form-control:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus {
  background-color: #0e1014;
  border-color: var(--whc-blue-light);
  box-shadow: 0 0 0 3px rgba(155, 196, 255, 0.14);
  color: var(--whc-text);
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--whc-quiet);
  opacity: 1;
}

.input-group-text,
.input-group-addon {
  background-color: var(--whc-surface-raised);
  border-color: var(--whc-border);
  color: var(--whc-muted);
}

label,
.col-form-label {
  color: var(--whc-muted);
}

.btn {
  border-radius: 2px;
  font-family: var(--whc-mono);
  font-size: 0.82rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn-primary,
.btn-success,
.btn-info {
  background-color: var(--whc-blue);
  border-color: var(--whc-blue);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus {
  background-color: #205da9;
  border-color: #205da9;
  color: #fff;
}

.btn-default,
.btn-secondary,
.btn-light {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--whc-border);
  color: var(--whc-text);
}

.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(245, 245, 242, 0.3);
  color: var(--whc-text);
}

.btn-link {
  color: var(--whc-blue-light);
}

.table,
table {
  background-color: transparent;
  color: var(--whc-text);
}

.table > :not(caption) > * > *,
.table th,
.table td,
table th,
table td {
  border-color: var(--whc-border);
}

.table thead th,
table thead th {
  color: var(--whc-muted);
  font-family: var(--whc-mono);
  font-size: 0.75rem;
  font-weight: 400;
  text-transform: uppercase;
}

.table tbody tr,
table tbody tr {
  background-color: transparent;
}

.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-hover > tbody > tr:hover > * {
  --bs-table-bg: rgba(255, 255, 255, 0.035);
  background-color: rgba(255, 255, 255, 0.035);
  color: var(--whc-text);
}

.nav-tabs {
  border-color: var(--whc-border);
}

.nav-tabs > li > a {
  background-color: transparent;
  border-color: transparent;
  color: var(--whc-muted);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: var(--whc-surface);
  border-color: var(--whc-border);
  color: var(--whc-text);
}

.breadcrumb {
  background-color: transparent;
  color: var(--whc-muted);
  font-family: var(--whc-mono);
  font-size: 0.75rem;
}

.breadcrumb > .active {
  color: var(--whc-text);
}

.alert {
  background-color: var(--whc-surface-raised);
  border-color: var(--whc-border);
  color: var(--whc-text);
}

.alert-success {
  border-left: 3px solid var(--whc-green);
}

.alert-warning {
  border-left: 3px solid #ffc857;
}

.alert-danger,
.alert-error {
  border-left: 3px solid #ff7777;
}

.pagination > li > a,
.pagination > li > span,
.page-link {
  background-color: var(--whc-surface);
  border-color: var(--whc-border);
  color: var(--whc-blue-light);
}

.pagination > .active > a,
.pagination > .active > span,
.page-item.active .page-link {
  background-color: var(--whc-blue);
  border-color: var(--whc-blue);
  color: #fff;
}

.footer {
  border-top: 1px solid var(--whc-border);
  color: var(--whc-quiet);
}

.footer p {
  color: var(--whc-quiet);
  font-family: var(--whc-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

hr {
  border-color: var(--whc-border);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}