:root {
  --weg-blue: #00579D;
  --weg-dark: #3C3C3B;
  --weg-green: #78BE20;
  --weg-white: #FFFFFF;
  --weg-gray-light: #F2F2F2;
  --bs-primary: var(--weg-blue);
  --bs-primary-rgb: 0, 87, 157;
  --bs-link-color: var(--weg-blue);
  --bs-link-color-rgb: 0, 87, 157;
  --bs-body-color: var(--weg-dark);
}
body { background: var(--weg-gray-light); color: var(--weg-dark); }

.weg-header { background: var(--weg-blue); color: var(--weg-white); }
.weg-header .brand { font-weight: 800; letter-spacing: .04em; font-size: 1.35rem; }
.weg-header .brand small { font-weight: 400; letter-spacing: 0; opacity: .85; }
.weg-header .btn-link { color: var(--weg-white); text-decoration: none; }

.weg-tabs { background: var(--weg-white); border-bottom: 1px solid #dcdcdc; }
.nav-tabs { border-bottom: 0; }
.nav-tabs .nav-link { color: var(--weg-dark); border: 0; border-radius: 0; padding: .8rem 1.25rem; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--weg-blue); background: var(--weg-gray-light); }
.nav-tabs .nav-link.active {
  background-color: var(--weg-blue);
  color: var(--weg-white);
  border-bottom: 3px solid var(--weg-green);
}

.btn-primary { --bs-btn-bg: var(--weg-blue); --bs-btn-border-color: var(--weg-blue);
  --bs-btn-hover-bg: #004a86; --bs-btn-hover-border-color: #004a86;
  --bs-btn-active-bg: #003f73; --bs-btn-active-border-color: #003f73; }
.btn-success { --bs-btn-bg: var(--weg-green); --bs-btn-border-color: var(--weg-green);
  --bs-btn-hover-bg: #69a81c; --bs-btn-hover-border-color: #69a81c; --bs-btn-color: #fff; }
.btn-outline-primary { --bs-btn-color: var(--weg-blue); --bs-btn-border-color: var(--weg-blue);
  --bs-btn-hover-bg: var(--weg-blue); --bs-btn-hover-border-color: var(--weg-blue); }
.form-check-input:checked { background-color: var(--weg-blue); border-color: var(--weg-blue); }

.card { border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.card-header { background: var(--weg-white); border-bottom: 2px solid var(--weg-green); font-weight: 700; }
.section-title { color: var(--weg-blue); font-weight: 700; }
.pick-list { max-height: 260px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: .375rem; padding: .5rem .75rem; background: #fff; }
.pick-list .form-check { margin-bottom: .25rem; }
.status-A { background: var(--weg-green) !important; }
.status-S { background: #f0ad4e !important; }
.status-I { background: #8a8a8a !important; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--weg-gray-light); }
.avatar-lg { width: 120px; height: 150px; object-fit: cover; border-radius: .375rem; background: var(--weg-gray-light); }
.pin-feedback.ok { color: #3f7d0e; }
.pin-feedback.bad { color: #b02a37; }
.mock-banner { background: #fff3cd; color: #664d03; font-size: .85rem; }
.table thead th { color: var(--weg-blue); font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }
.btn-check:checked + .btn-outline-primary, .btn-outline-primary.active { background: var(--weg-blue); border-color: var(--weg-blue); color: #fff; }
.form-range { accent-color: var(--weg-blue); }
.form-range::-webkit-slider-thumb { background: var(--weg-blue); }
.form-range::-moz-range-thumb { background: var(--weg-blue); }
.form-switch .form-check-input:focus, .form-control:focus, .form-select:focus { border-color: #6aa3d1; box-shadow: 0 0 0 .2rem rgba(0, 87, 157, .2); }
/* show "24x7" literally (some fonts turn the x into a times sign) */
body { font-feature-settings: "calt" 0; font-variant-ligatures: no-contextual; }
/* camera capture */
.camera-stage { position: relative; width: 100%; aspect-ratio: 1.66 / 1.92; max-height: 60vh; margin: 0 auto; background: #000; overflow: hidden; border-radius: .375rem; }
.camera-stage video, .camera-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-stage video { transform: scaleX(-1); }  /* mirror the live view like a selfie */
.camera-guide { position: absolute; left: 22%; right: 22%; top: 10%; height: 58%; border: 2px dashed rgba(255,255,255,.8); border-radius: 50%; pointer-events: none; }
.camera-thumb { display: block; width: 72px; height: 83px; object-fit: cover; border-radius: .25rem; border: 1px solid #dee2e6; }