html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem rgba(0, 127, 182, .5);
}


.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Sensor status dots (legacy green/yellow/blue/orange/red/purple status images). */
.status-dot {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.status-ok { background-color: #2e9e44; }
.status-defect { background-color: #f2c200; }
.status-no-connection { background-color: #1f6fd1; }
.status-doubtful { background-color: #f28c00; }
.status-error { background-color: #d42a2a; }
.status-doubtful-purple { background-color: #7b3fb5; }
.status-unknown { background-color: #adb5bd; }

/* Measurement chart on the sensor details page (legacy height 370px). */
.sensor-chart {
  height: 370px;
  width: 100%;
}

.trend-chart { height: 460px; width: 100%; }
.trend-chart-vertical { height: 760px; width: 100%; }
.trend-container:fullscreen { padding: 1rem; }
.trend-container:fullscreen .trend-chart,
.trend-container:fullscreen .trend-chart-vertical { height: calc(100vh - 2rem); }

@media print {
  header, footer, .d-print-none { display: none !important; }
  .trend-chart { height: 16cm; }
  .trend-chart-vertical { height: 24cm; }
}

/* GPS map on the sensor overview (legacy height 270px). */
.location-map {
  height: 270px;
  width: 100%;
}
.label-search-text {
  white-space: pre-line;
  min-width: 12rem;
}

.home-section {
  margin-bottom: 1.5rem;
}

/* The legacy banner above the navbar. */
.site-banner {
  padding-top: .5rem;
}

/* ---- Legacy look: house colours (style.css links/bold #007FB6, menu text #243751, chevron cyan). ---- */
:root {
  --lo-blue: #007fb6;
  --lo-blue-dark: #00658f;
  --lo-navy: #243751;
  --lo-cyan: #109cd9;
  --bs-primary: #007fb6;
  --bs-primary-rgb: 0, 127, 182;
  --bs-primary-text-emphasis: #003349;
  --bs-primary-bg-subtle: #cce5f0;
  --bs-primary-border-subtle: #99cce2;
  --bs-link-color: #007fb6;
  --bs-link-color-rgb: 0, 127, 182;
  --bs-link-hover-color: #00658f;
  --bs-link-hover-color-rgb: 0, 101, 143;
  --bs-focus-ring-color: rgba(0, 127, 182, .25);
}

.btn-primary {
  --bs-btn-bg: var(--lo-blue);
  --bs-btn-border-color: var(--lo-blue);
  --bs-btn-hover-bg: var(--lo-blue-dark);
  --bs-btn-hover-border-color: var(--lo-blue-dark);
  --bs-btn-active-bg: #005a80;
  --bs-btn-active-border-color: #005a80;
  --bs-btn-disabled-bg: var(--lo-blue);
  --bs-btn-disabled-border-color: var(--lo-blue);
  --bs-btn-focus-shadow-rgb: 0, 127, 182;
}

.btn-outline-primary {
  --bs-btn-color: var(--lo-blue);
  --bs-btn-border-color: var(--lo-blue);
  --bs-btn-hover-bg: var(--lo-blue);
  --bs-btn-hover-border-color: var(--lo-blue);
  --bs-btn-active-bg: var(--lo-blue-dark);
  --bs-btn-active-border-color: var(--lo-blue-dark);
  --bs-btn-disabled-color: var(--lo-blue);
  --bs-btn-disabled-border-color: var(--lo-blue);
  --bs-btn-focus-shadow-rgb: 0, 127, 182;
}

.btn-link {
  --bs-btn-color: var(--lo-blue);
  --bs-btn-hover-color: var(--lo-blue-dark);
}

/* Bootstrap writes these colours literally instead of through --bs-primary. */
.form-check-input:checked {
  background-color: var(--lo-blue);
  border-color: var(--lo-blue);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #80bfdb;
}

.form-switch .form-check-input:focus: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='%2380bfdb'/%3e%3c/svg%3e");
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--lo-blue);
}

/* ---- Legacy menu bar (Images/menubackground.jpg, menuitem.png): light grey, navy line, bold uppercase. ---- */
.site-navbar {
  background: linear-gradient(#f6f6f6, #ebebeb);
  border-bottom: 3px solid var(--lo-navy);
  --bs-navbar-color: var(--lo-navy);
  --bs-navbar-hover-color: var(--lo-navy);
  --bs-navbar-active-color: var(--lo-navy);
  --bs-navbar-brand-color: var(--lo-navy);
  --bs-navbar-brand-hover-color: var(--lo-navy);
  --lo-nav-hover-bg: #e2e2e2;
}

.site-navbar .navbar-nav .nav-link {
  color: var(--bs-navbar-color);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  border-radius: .25rem;
}

@media (min-width: 992px) {
  .site-navbar .navbar-nav .nav-link {
    padding-inline: .75rem;
  }
}

.site-navbar .navbar-nav .nav-link::before {
  content: "»";
  color: var(--lo-cyan);
  margin-right: .35rem;
}

.site-navbar .navbar-nav .nav-link:hover,
.site-navbar .navbar-nav .nav-link.active,
.site-navbar .navbar-nav .show > .nav-link {
  background-color: var(--lo-nav-hover-bg);
}

/* Per-host branding (Branding:Hosts:{host}:NavbarColor): a coloured bar with white text, no chevrons (legacy grube). */
.site-navbar.navbar-branded {
  background: var(--brand-navbar);
  border-bottom-color: rgba(0, 0, 0, .25);
  --bs-navbar-color: rgba(255, 255, 255, .9);
  --bs-navbar-hover-color: #fff;
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --lo-nav-hover-bg: rgba(255, 255, 255, .15);
}

.site-navbar.navbar-branded .navbar-nav .nav-link::before {
  content: none;
}

/* ---- Legacy page background (Images/bg.gif: dark navy tile) with the site in a white column on top. ---- */
body {
  background: #032f4f url("/images/bg.gif") repeat;
}

body.plain-background {
  background: #fff;
}

.site-page {
  background-color: #fff;
  box-shadow: 0 0 1.25rem rgba(0, 0, 0, .35);
}

@media print {
  body, .site-page {
    background: #fff;
    box-shadow: none;
  }
}

/* Language flags (legacy Images/Languages gifs, now SVG): same height, a hairline so white stripes show. */
.language-flag {
  /* One 3:2 size, so the names line up; the 2:1 British flag is trimmed a little at the sides. */
  height: .9rem;
  width: 1.35rem;
  object-fit: cover;
  vertical-align: -.1rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Collapsed menu: one full-width toggle with the current page (styled as a menu item) and the icon in a box. */
.site-navbar .site-navbar-toggler {
  width: 100%;
  align-items: center;
  gap: .5rem;
  border: 0;
  padding: .25rem 0;
}

/* Only below lg: from lg on, Bootstrap hides the toggler and display: flex would bring it back. */
@media (max-width: 991.98px) {
  .site-navbar .site-navbar-toggler {
    display: flex;
  }
}

/* Bootstrap rings the focused toggler; on the full-width bar that frames the whole menu bar after every tap.
   Only keyboard focus (focus-visible) shows a ring, around the icon box. */
.site-navbar .site-navbar-toggler:focus {
  box-shadow: none;
}

.site-navbar .site-navbar-toggler:focus-visible .site-navbar-toggler-box {
  box-shadow: 0 0 0 .2rem rgba(0, 127, 182, .5);
}

.site-navbar .site-navbar-toggler-box {
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  line-height: 1;
}

.site-navbar .current-page {
  color: var(--bs-navbar-active-color);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding-left: .5rem;
}

.site-navbar .current-page::before {
  content: "»";
  color: var(--lo-cyan);
  margin-right: .35rem;
}

.site-navbar.navbar-branded .current-page::before {
  content: none;
}

/* Every menu item starts with "»" so they line up, also the dropdowns; on desktop the flag stays without one. */
@media (min-width: 992px) {
  .site-navbar .navbar-nav .language-toggle::before {
    content: none;
  }
}

/* Collapsed menu: the logged-in user beside the menu icon, always visible. */
.site-navbar .current-user {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  min-width: 0;
  max-width: 50%;
  margin-left: auto;
  color: var(--bs-navbar-color);
  font-size: .8rem;
}

.site-navbar .site-navbar-toggler-box {
  margin-left: auto;
}

.site-navbar .current-user + .site-navbar-toggler-box {
  margin-left: 0;
}

/* The menu's own user entry is then only for screen readers. */
@media (max-width: 991.98px) {
  .site-navbar .nav-user {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}