/* Nuvine theme, loaded after app.css when HAPM_THEME=nuvine (templates/themes/nuvine.html).
   Only overrides: Bootstrap variables, the variables of app.css and a few components. No markup changes,
   so upstream templates merge without conflicts. Brand rules: flat colours, no gradients, glow or blur,
   rounded surfaces, calm 8px buttons (owner, 05.10.2026, as on the website and in the panel), every text and control at least WCAG AA on its background.
   Colours follow nuvine-landing (resources/css/homepage-theme.css). */

/* ---------- Fonts (self-hosted, SIL OFL, see fonts/nuvine/LICENSE-*.txt) ---------- */
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/nuvine/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 400; src: url("../fonts/nuvine/manrope-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/nuvine/manrope-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 500; src: url("../fonts/nuvine/manrope-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/nuvine/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/nuvine/manrope-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/nuvine/manrope-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/nuvine/manrope-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/nuvine/baloo-2-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-display: swap; font-weight: 600; src: url("../fonts/nuvine/baloo-2-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/nuvine/baloo-2-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-display: swap; font-weight: 700; src: url("../fonts/nuvine/baloo-2-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-display: swap; font-weight: 800; src: url("../fonts/nuvine/baloo-2-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Baloo 2"; font-style: normal; font-display: swap; font-weight: 800; src: url("../fonts/nuvine/baloo-2-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root,
[data-bs-theme="dark"] {
  --nv-body: #17181c;
  --nv-paper: #1e1f24;
  --nv-paper-2: #26272d;
  --nv-border: #2e2f36;
  --nv-border-strong: #3a3b43;
  --nv-field-border: #6b6d77;   /* 3.2:1 on --nv-paper, visible field outline (WCAG 1.4.11) */
  --nv-text: #cfd0d4;
  --nv-muted: #9598a2;          /* 5.7:1 on --nv-paper; the site's #858791 is too close to 4.5:1 for small labels */
  --nv-blue: #3b6fea;
  --nv-blue-hover: #2f5fd6;
  --nv-blue-bright: #6d94f0;
  --nv-blue-dim: #3b6fea22;
  --nv-blue-border: #3b6fea66;
  --nv-green: #34c47a;
  --nv-green-dim: #34c47a1f;
  --nv-green-border: #34c47a4d;
  --nv-amber: #e2a13a;
  --nv-amber-dim: #e2a13a1f;
  --nv-amber-border: #e2a13a4d;
  --nv-red: #f2554a;
  --nv-red-text: #f47a71;       /* 5.4:1 on a red tint, the base red is only 4.2:1 there */
  --nv-red-solid: #c9372c;      /* white text on it 5.2:1 */
  --nv-red-dim: #f2554a1f;
  --nv-red-border: #f2554a4d;
  --nv-cyan: #06b6d4;
  --nv-cyan-text: #5bc8dc;
  --nv-cyan-dim: #06b6d41f;
  --nv-cyan-border: #06b6d44d;
  --nv-heading: "Baloo 2", ui-rounded, system-ui, sans-serif;

  --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--nv-body);
  --bs-body-bg-rgb: 23, 24, 28;
  --bs-body-color: var(--nv-text);
  --bs-body-color-rgb: 207, 208, 212;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #fff;
  --bs-secondary-color: var(--nv-muted);
  --bs-secondary-color-rgb: 149, 152, 162;
  --bs-tertiary-color: var(--nv-muted);
  --bs-tertiary-color-rgb: 149, 152, 162;
  --bs-secondary-bg: var(--nv-paper-2);
  --bs-secondary-bg-rgb: 38, 39, 45;
  --bs-tertiary-bg: var(--nv-paper);
  --bs-tertiary-bg-rgb: 30, 31, 36;
  --bs-border-color: var(--nv-border);
  --bs-border-color-translucent: var(--nv-border);
  --bs-border-radius: .625rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.25rem;

  --bs-primary: var(--nv-blue);
  --bs-primary-rgb: 59, 111, 234;
  --bs-success: var(--nv-green);
  --bs-success-rgb: 52, 196, 122;
  --bs-warning: var(--nv-amber);
  --bs-warning-rgb: 226, 161, 58;
  --bs-danger: var(--nv-red);
  --bs-danger-rgb: 242, 85, 74;
  --bs-info: var(--nv-cyan);
  --bs-info-rgb: 6, 182, 212;

  --bs-primary-text-emphasis: #a9c1f7;
  --bs-success-text-emphasis: var(--nv-green);
  --bs-warning-text-emphasis: var(--nv-amber);
  --bs-danger-text-emphasis: var(--nv-red-text);
  --bs-info-text-emphasis: var(--nv-cyan-text);
  --bs-secondary-text-emphasis: var(--nv-text);
  --bs-primary-bg-subtle: #1f273d;
  --bs-success-bg-subtle: #1c2b26;
  --bs-warning-bg-subtle: #2e2820;
  --bs-danger-bg-subtle: #301f22;
  --bs-info-bg-subtle: #172a31;
  --bs-secondary-bg-subtle: var(--nv-paper-2);
  --bs-primary-border-subtle: var(--nv-blue-border);
  --bs-success-border-subtle: var(--nv-green-border);
  --bs-warning-border-subtle: var(--nv-amber-border);
  --bs-danger-border-subtle: var(--nv-red-border);
  --bs-info-border-subtle: var(--nv-cyan-border);
  --bs-secondary-border-subtle: var(--nv-border-strong);

  --bs-link-color: var(--nv-blue-bright);
  --bs-link-color-rgb: 109, 148, 240;
  --bs-link-hover-color: #9db7f5;
  --bs-link-hover-color-rgb: 157, 183, 245;
  --bs-code-color: #f0a3c8;
  --bs-form-valid-color: var(--nv-green);
  --bs-form-valid-border-color: var(--nv-green);
  --bs-form-invalid-color: var(--nv-red-text);
  --bs-form-invalid-border-color: var(--nv-red);
  --bs-focus-ring-color: rgba(109, 148, 240, .6);

  /* app.css */
  --hapm-card-bg: var(--nv-paper);
  --hapm-muted: var(--nv-muted);
}

body { font-family: var(--bs-body-font-family); background-color: var(--nv-body); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .page-title h1, .modal-title, .kpi .kpi-value {
  font-family: var(--nv-heading);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.page-title h1 { font-size: 1.75rem; }
.page-title .subtitle { color: var(--nv-muted); }

:focus-visible { outline: 2px solid var(--nv-blue-bright); outline-offset: 2px; }

/* ---------- Navigation ---------- */
.hapm-navbar {
  backdrop-filter: none;
  background-color: var(--nv-paper) !important;
  border-bottom: 1px solid var(--nv-border) !important;
  --bs-navbar-color: #b4b6bd;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-toggler-border-color: var(--nv-border-strong);
  --bs-navbar-toggler-border-radius: 8px;
  --bs-navbar-toggler-focus-width: 0;
}
/* "Nuvine HAProxy Manager" logo in place of the upstream one: the <img> keeps its alt text, the picture comes from the background */
.hapm-brand,
.login-wrap img[src$="/img/logo.svg"] {
  object-position: -9999px 0;
  background: url("../img/nuvine/logo-mark.png") left center / contain no-repeat;
}
.hapm-brand { width: 121px; height: 44px; }
.login-wrap img[src$="/img/logo.svg"] {
  width: 252px; height: 100px;
  background-image: url("../img/nuvine/logo.png");
  background-position: center;
}
.hapm-navbar .nav-link { border-radius: 8px; transition: background-color .15s, color .15s; }
@media (min-width: 1400px) {
  .hapm-navbar .navbar-nav .nav-link { padding-top: .4rem; padding-bottom: .4rem; }
}
.hapm-navbar .navbar-nav .nav-link:hover { background-color: var(--nv-paper-2); }
.hapm-navbar .navbar-nav .nav-link.active { background-color: var(--nv-blue-dim); color: #fff; }
.navbar .nav-link.active i { color: var(--nv-blue-bright); }
.hapm-logo { background: var(--nv-blue); }
.hapm-avatar { background: var(--nv-blue-dim); color: #c8d6fa; border: 1px solid var(--nv-blue-border); font-weight: 700; }

.dropdown-menu {
  --bs-dropdown-bg: var(--nv-paper);
  --bs-dropdown-border-color: var(--nv-border-strong);
  --bs-dropdown-border-radius: 14px;
  --bs-dropdown-link-color: var(--nv-text);
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: var(--nv-blue-dim);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--nv-blue);
  --bs-dropdown-header-color: var(--nv-muted);
  --bs-dropdown-divider-bg: var(--nv-border);
  --bs-dropdown-box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
  padding: .4rem;
}
.dropdown-item { border-radius: 8px; }
.dropdown-item.text-danger { color: var(--nv-red-text) !important; }

/* ---------- Surfaces ---------- */
.card {
  --bs-card-bg: var(--nv-paper);
  --bs-card-border-color: var(--nv-border);
  --bs-card-border-radius: 16px;
  --bs-card-inner-border-radius: 15px;
  --bs-card-cap-bg: transparent;
  border-width: 2px;
}
.card.shadow-lg, .card.shadow, .card.shadow-sm { box-shadow: none !important; }
.card-header { background-color: transparent; font-weight: 700; color: #fff; }
.card-header .bi { color: var(--nv-blue-bright); }
.card-footer { background-color: transparent; border-color: var(--nv-border); }
.card.border-danger { border-color: var(--nv-red-border) !important; }
.card.border-warning { border-color: var(--nv-amber-border) !important; }
.card.border-primary, .border-primary { border-color: var(--nv-blue) !important; }
.kpi .kpi-label { color: var(--nv-muted); }
.kpi .kpi-icon { opacity: 1; color: var(--nv-blue-bright); }

.modal {
  --bs-modal-bg: var(--nv-paper);
  --bs-modal-border-color: var(--nv-border-strong);
  --bs-modal-border-width: 2px;
  --bs-modal-border-radius: 20px;
  --bs-modal-inner-border-radius: 18px;
  --bs-modal-header-border-color: var(--nv-border);
  --bs-modal-footer-border-color: var(--nv-border);
}
.modal-backdrop { --bs-backdrop-opacity: .7; }
.toast {
  --bs-toast-bg: var(--nv-paper-2);
  --bs-toast-border-color: var(--nv-border-strong);
  --bs-toast-border-radius: 14px;
  --bs-toast-header-bg: var(--nv-paper);
  --bs-toast-header-color: #fff;
  --bs-toast-color: var(--nv-text);
}
.list-group {
  --bs-list-group-border-color: var(--nv-border);
  --bs-list-group-color: var(--nv-text);
  --bs-list-group-action-hover-bg: var(--nv-paper-2);
  --bs-list-group-active-bg: var(--nv-blue);
  --bs-list-group-active-border-color: var(--nv-blue);
}
.hapm-footer { border-top: 2px solid var(--nv-border); color: var(--nv-muted); }

/* ---------- Buttons: 8px like the website and the panel (owner, 05.10.2026), solid primary, quiet secondary ---------- */
.btn { --bs-btn-border-radius: 8px; --bs-btn-font-weight: 600; --bs-btn-focus-box-shadow: 0 0 0 2px var(--nv-blue-bright); }
.btn-sm { --bs-btn-border-radius: 7px; --bs-btn-padding-x: .75rem; }
.btn-lg { --bs-btn-border-radius: 8px; --bs-btn-font-weight: 700; font-family: var(--nv-heading); }
.btn-group > .btn, .input-group > .btn { --bs-btn-border-radius: var(--bs-border-radius); }
.btn-primary {
  --bs-btn-bg: var(--nv-blue); --bs-btn-border-color: var(--nv-blue); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--nv-blue-hover); --bs-btn-hover-border-color: var(--nv-blue-hover); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--nv-blue-hover); --bs-btn-active-border-color: var(--nv-blue-hover); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--nv-blue); --bs-btn-disabled-border-color: var(--nv-blue); --bs-btn-disabled-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: var(--nv-paper-2); --bs-btn-border-color: var(--nv-border-strong); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--nv-border-strong); --bs-btn-hover-border-color: var(--nv-field-border); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--nv-border-strong); --bs-btn-active-border-color: var(--nv-field-border); --bs-btn-active-color: #fff;
}
.btn-success {
  --bs-btn-bg: var(--nv-green); --bs-btn-border-color: var(--nv-green); --bs-btn-color: #10241a;
  --bs-btn-hover-bg: #2bab69; --bs-btn-hover-border-color: #2bab69; --bs-btn-hover-color: #10241a;
  --bs-btn-active-bg: #2bab69; --bs-btn-active-border-color: #2bab69; --bs-btn-active-color: #10241a;
  --bs-btn-disabled-bg: var(--nv-green); --bs-btn-disabled-border-color: var(--nv-green); --bs-btn-disabled-color: #10241a;
}
.btn-warning {
  --bs-btn-bg: var(--nv-amber); --bs-btn-border-color: var(--nv-amber); --bs-btn-color: #17181c;
  --bs-btn-hover-bg: #cc8f2c; --bs-btn-hover-border-color: #cc8f2c; --bs-btn-hover-color: #17181c;
  --bs-btn-active-bg: #cc8f2c; --bs-btn-active-border-color: #cc8f2c; --bs-btn-active-color: #17181c;
}
.btn-danger {
  --bs-btn-bg: var(--nv-red-solid); --bs-btn-border-color: var(--nv-red-solid); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #b02f25; --bs-btn-hover-border-color: #b02f25; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #b02f25; --bs-btn-active-border-color: #b02f25; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--nv-red-solid); --bs-btn-disabled-border-color: var(--nv-red-solid); --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: var(--nv-blue-bright); --bs-btn-border-color: var(--nv-blue-border);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nv-blue); --bs-btn-hover-border-color: var(--nv-blue);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nv-blue-hover); --bs-btn-active-border-color: var(--nv-blue-hover);
  --bs-btn-disabled-color: var(--nv-blue-bright); --bs-btn-disabled-border-color: var(--nv-blue-border);
}
.btn-outline-secondary, .btn-outline-light {
  --bs-btn-color: var(--nv-text); --bs-btn-border-color: var(--nv-border-strong);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nv-paper-2); --bs-btn-hover-border-color: var(--nv-field-border);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nv-paper-2); --bs-btn-active-border-color: var(--nv-field-border);
  --bs-btn-disabled-color: var(--nv-muted); --bs-btn-disabled-border-color: var(--nv-border);
}
.btn-outline-success {
  --bs-btn-color: var(--nv-green); --bs-btn-border-color: var(--nv-green-border);
  --bs-btn-hover-color: #10241a; --bs-btn-hover-bg: var(--nv-green); --bs-btn-hover-border-color: var(--nv-green);
  --bs-btn-active-color: #10241a; --bs-btn-active-bg: var(--nv-green); --bs-btn-active-border-color: var(--nv-green);
}
.btn-outline-warning {
  --bs-btn-color: var(--nv-amber); --bs-btn-border-color: var(--nv-amber-border);
  --bs-btn-hover-color: #17181c; --bs-btn-hover-bg: var(--nv-amber); --bs-btn-hover-border-color: var(--nv-amber);
  --bs-btn-active-color: #17181c; --bs-btn-active-bg: var(--nv-amber); --bs-btn-active-border-color: var(--nv-amber);
}
.btn-outline-danger {
  --bs-btn-color: var(--nv-red-text); --bs-btn-border-color: var(--nv-red-border);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nv-red-solid); --bs-btn-hover-border-color: var(--nv-red-solid);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nv-red-solid); --bs-btn-active-border-color: var(--nv-red-solid);
}
.btn-outline-info {
  --bs-btn-color: var(--nv-cyan-text); --bs-btn-border-color: var(--nv-cyan-border);
  --bs-btn-hover-color: #17181c; --bs-btn-hover-bg: var(--nv-cyan); --bs-btn-hover-border-color: var(--nv-cyan);
  --bs-btn-active-color: #17181c; --bs-btn-active-bg: var(--nv-cyan); --bs-btn-active-border-color: var(--nv-cyan);
}
.btn-link { --bs-btn-color: var(--nv-blue-bright); --bs-btn-hover-color: #9db7f5; }
/* selected entry of a segmented control (range pickers use btn-secondary or a checked btn-check) */
.btn-group > .btn-secondary,
.btn-check:checked + .btn-outline-secondary, .btn-check:checked + .btn-outline-primary {
  background-color: var(--nv-blue); border-color: var(--nv-blue); color: #fff;
}

/* ---------- Badges: soft pills like the website, text at least 5:1 ---------- */
.badge { border-radius: 999px; font-weight: 700; padding: .35em .7em; border: 1px solid transparent; }
.badge.text-bg-primary { background-color: var(--nv-blue-dim) !important; border-color: var(--nv-blue-border); color: #a9c1f7 !important; }
.badge.text-bg-success { background-color: var(--nv-green-dim) !important; border-color: var(--nv-green-border); color: var(--nv-green) !important; }
.badge.text-bg-warning { background-color: var(--nv-amber-dim) !important; border-color: var(--nv-amber-border); color: var(--nv-amber) !important; }
.badge.text-bg-danger { background-color: var(--nv-red-dim) !important; border-color: var(--nv-red-border); color: var(--nv-red-text) !important; }
.badge.text-bg-info { background-color: var(--nv-cyan-dim) !important; border-color: var(--nv-cyan-border); color: var(--nv-cyan-text) !important; }
.badge.text-bg-secondary, .badge.text-bg-dark, .badge.text-bg-light { background-color: var(--nv-paper-2) !important; border-color: var(--nv-border-strong); color: var(--nv-text) !important; }
/* badges on solid buttons or the active nav pill keep a solid look */
.btn .badge, .nav-link.active .badge { border-color: transparent; }
/* solid text-bg-* outside badges: Bootstrap puts white text on green and red, which fails contrast */
.text-bg-success:not(.badge) { color: #10241a !important; }
.text-bg-danger:not(.badge) { background-color: var(--nv-red-solid) !important; }
.text-danger { color: var(--nv-red-text) !important; }
.text-info { color: var(--nv-cyan-text) !important; }
.text-primary { color: var(--nv-blue-bright) !important; }

/* ---------- Alerts ---------- */
.alert { --bs-alert-border-radius: 14px; border-width: 2px; }
.alert-primary, .alert-info, .alert-success, .alert-warning, .alert-danger, .alert-secondary { color: var(--nv-text); }
.alert-primary { --bs-alert-color: var(--nv-text); }
.alert .alert-link { color: #fff; }
.alert-warning .bi, .alert-warning strong { color: var(--nv-amber); }
.alert-danger .bi, .alert-danger strong { color: var(--nv-red-text); }
.alert-success .bi, .alert-success strong { color: var(--nv-green); }
.alert-info .bi, .alert-info strong { color: var(--nv-cyan-text); }

/* ---------- Forms ---------- */
.form-control, .form-select {
  background-color: var(--nv-body);
  border-color: var(--nv-field-border);
  color: #fff;
  border-radius: var(--bs-border-radius);
}
.form-control::placeholder { color: #7d808a; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--nv-paper-2); color: var(--nv-muted); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--nv-blue-bright);
  box-shadow: 0 0 0 2px var(--nv-blue-bright);
  background-color: var(--nv-body);
  color: #fff;
}
.input-group-text { background-color: var(--nv-paper-2); border-color: var(--nv-field-border); color: var(--nv-text); }
.form-check-input { background-color: var(--nv-body); border-color: var(--nv-field-border); }
.form-check-input:checked { background-color: var(--nv-blue); border-color: var(--nv-blue); }
.form-switch .form-check-input:not(:checked) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%239598a2'/%3e%3c/svg%3e");
}
.form-text { color: var(--nv-muted); }
.form-label { color: #e4e5e8; font-weight: 600; }
.progress { --bs-progress-bg: var(--nv-paper-2); --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--nv-blue); }

/* ---------- Tabs ---------- */
.nav-tabs { --bs-nav-tabs-border-color: var(--nv-border); --bs-nav-tabs-link-active-bg: var(--nv-paper); --bs-nav-tabs-link-active-border-color: var(--nv-border) var(--nv-border) var(--nv-paper); --bs-nav-tabs-border-radius: 12px; --bs-nav-link-color: var(--nv-text); --bs-nav-link-hover-color: #fff; border-bottom-width: 2px; }
.nav-tabs .nav-link.active { color: #fff; font-weight: 700; }
.nav-pills { --bs-nav-pills-border-radius: 8px; --bs-nav-pills-link-active-bg: var(--nv-blue); --bs-nav-link-color: var(--nv-text); }

/* ---------- Tables: calm, no colour behind them ---------- */
.table { --bs-table-color: var(--nv-text); --bs-table-border-color: var(--nv-border); --bs-table-hover-bg: rgba(255, 255, 255, .035); --bs-table-hover-color: #fff; --bs-table-striped-bg: rgba(255, 255, 255, .02); --bs-table-active-bg: var(--nv-blue-dim); }
.table thead th { color: var(--nv-muted); font-weight: 700; letter-spacing: .04em; }
.table > :not(caption) > * > * { border-bottom-color: var(--nv-border); }
.table strong, .table .fw-semibold, .table a:not(.btn) { color: #fff; }
.table a:not(.btn):hover { color: var(--nv-blue-bright); }

/* ---------- Status ---------- */
.status-up { background: var(--nv-green); box-shadow: none; }
.status-down { background: var(--nv-red); box-shadow: none; }
.status-maint { background: var(--nv-amber); }
.status-other { background: #858791; }
.avail-bar { border-radius: 3px; }
.hapm-temp > td { background-color: rgba(226, 161, 58, .07) !important; }

/* ---------- Code, editor, diffs ---------- */
.hapm-pre { background: #121317; border-color: var(--nv-border); border-radius: 12px; color: #d6d7db; }
.diff-add { color: #4fd68f; }
.diff-del { color: var(--nv-red-text); }
.diff-hunk { color: var(--nv-blue-bright); }
.CodeMirror { border: 2px solid var(--nv-border); border-radius: 12px; }
.cm-s-material-darker.CodeMirror, .cm-s-material-darker .CodeMirror-gutters { background-color: #121317; }
.cm-s-material-darker .CodeMirror-gutters { border-right: 1px solid var(--nv-border); }
.cm-s-material-darker .CodeMirror-linenumber { color: #6f727c; }
.cm-s-material-darker .CodeMirror-activeline-background { background: rgba(255, 255, 255, .04); }
.font-mono, code, kbd, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.audit-value { background: var(--nv-paper-2); }
.audit-icon { border-radius: 12px; }

/* ---------- Setup ---------- */
.setup-steps .step { border-width: 2px; border-radius: 14px; color: var(--nv-muted); background: var(--nv-paper); }
.setup-steps .step.done { border-color: var(--nv-green-border); color: var(--nv-green); }
.setup-steps .step.current { border-color: var(--nv-blue); color: #fff; box-shadow: none; background: var(--nv-blue-dim); }
.setup-steps .step .fw-semibold { font-weight: 700 !important; }
.choice-card:hover, .btn-check:checked + .choice-card, .cfg-option:has(input[type=radio]:checked) { border-color: var(--nv-blue) !important; }
.btn-check:checked + .choice-card { box-shadow: none; background: var(--nv-blue-dim); }
.cfg-option:has(input[type=radio]:checked) { background: var(--nv-blue-dim); }

/* ---------- Login, setup, logout: mascot and soft background shapes ---------- */
body:has(.login-wrap),
body:has(.setup-wrap) {
  background-image: url("../img/nuvine/blob-blue.svg"), url("../img/nuvine/blob-green.svg");
  background-repeat: no-repeat;
  background-position: right -150px top -60px, left -160px bottom -150px;
  background-attachment: fixed;
}
.login-wrap { margin-top: 4vh; position: relative; }
.login-wrap::before,
.setup-wrap > .text-center:first-child::before {
  content: "";
  display: block;
  margin: 0 auto;
  background: url("../img/nuvine/mascot.svg") center / contain no-repeat;
}
.login-wrap::before { width: 170px; height: 156px; margin-bottom: -4px; }
.setup-wrap > .text-center:first-child::before { width: 110px; height: 100px; margin-bottom: .5rem; }
.login-wrap .card { border-radius: 24px; }
.login-wrap .card-body { padding: 2rem 2rem 2.25rem !important; }
.setup-wrap h1 { font-size: 2rem; }

/* ---------- Error page ---------- */
.display-3.text-primary { font-family: var(--nv-heading); font-weight: 800; color: var(--nv-blue-bright) !important; }

@media (max-width: 575.98px) {
  body:has(.login-wrap), body:has(.setup-wrap) { background-position: right -260px top -120px, left -260px bottom -220px; }
  .login-wrap .card-body { padding: 1.5rem 1.25rem 1.75rem !important; }
}
@media (prefers-reduced-motion: reduce) {
  .choice-card, .hapm-navbar .nav-link { transition: none; }
  .choice-card:hover { transform: none; }
}

/* ---------- Phones: wide tables scroll inside their card instead of moving the whole page sideways ---------- */
@media (max-width: 576px) {
  .card > .table, .card-body > .table, .card > table { display: block; overflow-x: auto; }
}