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 #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Huisstijl (Unica brand v1.0) ---------------------------------------- */
:root {
  /* Volledig primair palet; rood draagt bewust niet alles. */
  --unica-red: #e2001a;
  --unica-red-dark: #b80016;
  --unica-orange: #ff9a00;
  --unica-purple: #530084;
  --unica-beige: #e5e5d6;

  /* Archivo is het vaste lettertype; Arial als terugval. */
  --bs-body-font-family: 'Archivo', Arial, sans-serif;
}

/* Koppen ook in Archivo (erft via body, hier expliciet voor de zekerheid). */
body, h1, h2, h3, h4, h5, h6, .btn {
  font-family: 'Archivo', Arial, sans-serif;
}

.text-unica { color: var(--unica-red) !important; }

/* Navbar-merknaam: rode wordmark met drie palet-stipjes ervoor. */
.navbar-brand-unica {
  display: inline-flex;
  align-items: center;
  gap: .15rem;
  font-weight: 700;
  color: var(--unica-red);
}
.navbar-brand-unica:hover,
.navbar-brand-unica:focus { color: var(--unica-red-dark); }
.navbar-brand-unica .brand-dot {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
}
.navbar-brand-unica .brand-dot:last-of-type { margin-right: .4rem; }
.brand-dot--red    { background: var(--unica-red); }
.brand-dot--orange { background: var(--unica-orange); }
.brand-dot--purple { background: var(--unica-purple); }

.btn-unica {
  --bs-btn-bg: var(--unica-red);
  --bs-btn-border-color: var(--unica-red);
  --bs-btn-hover-bg: var(--unica-red-dark);
  --bs-btn-hover-border-color: var(--unica-red-dark);
  --bs-btn-active-bg: var(--unica-red-dark);
  --bs-btn-active-border-color: var(--unica-red-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
}

/* Primaire knoppen overal in Unica-rood (gelijk aan de hoofd-CTA btn-unica). */
.btn-primary {
  --bs-btn-bg: var(--unica-red);
  --bs-btn-border-color: var(--unica-red);
  --bs-btn-hover-bg: var(--unica-red-dark);
  --bs-btn-hover-border-color: var(--unica-red-dark);
  --bs-btn-active-bg: var(--unica-red-dark);
  --bs-btn-active-border-color: var(--unica-red-dark);
  --bs-btn-disabled-bg: var(--unica-red);
  --bs-btn-disabled-border-color: var(--unica-red);
}
.btn-outline-primary {
  --bs-btn-color: var(--unica-red);
  --bs-btn-border-color: var(--unica-red);
  --bs-btn-hover-bg: var(--unica-red);
  --bs-btn-hover-border-color: var(--unica-red);
  --bs-btn-active-bg: var(--unica-red);
  --bs-btn-active-border-color: var(--unica-red);
}

/* Status-badges in de huisstijl (palet heeft geen groen -> actief = paars). */
.badge-unica-active { background-color: var(--unica-purple); color: #fff; }
.badge-unica-warn   { background-color: var(--unica-orange); color: #000; }
.badge-unica-muted  { background-color: var(--unica-beige);  color: #000; }

/* Neutrale hero met een meerkleurige brand-accentbalk bovenaan (rood/oranje/
   paars) i.p.v. een rode dominantie. */
.home-hero {
  position: relative;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  overflow: hidden;
}
.home-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--unica-red) 0%, var(--unica-red) 33%,
    var(--unica-orange) 33%, var(--unica-orange) 66%,
    var(--unica-purple) 66%, var(--unica-purple) 100%);
}
.home-hero .home-logo { max-width: 280px; width: 60%; height: auto; }

/* Brand-blokmotief (afgeronde vierkanten in de primaire kleuren). */
.home-blocks { display: flex; justify-content: center; gap: .5rem; }
.home-block { width: 1.4rem; height: 1.4rem; border-radius: .4rem; }
.home-block--red    { background: var(--unica-red); }
.home-block--orange { background: var(--unica-orange); }
.home-block--purple { background: var(--unica-purple); }

/* #240: korte groene highlight wanneer een sensorwaarde live wordt bijgewerkt. */
@keyframes unimon-flash {
  0%   { background-color: rgba(25, 135, 84, 0.45); }
  100% { background-color: transparent; }
}
.flash-update > td {
  animation: unimon-flash 2s ease-out;
}

/* Rond icoonvlak voor de feature-kaarten; kleur per variant uit het palet. */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.4rem;
}
.feature-icon--red    { background: rgba(226, 0, 26, 0.12);  color: var(--unica-red); }
.feature-icon--orange { background: rgba(255, 154, 0, 0.16); color: #cc7a00; }
.feature-icon--purple { background: rgba(83, 0, 132, 0.12);  color: var(--unica-purple); }
.feature-icon--beige  { background: var(--unica-beige);      color: #000; }