/* =========
   Branding (SaaS / meldkamer)
   ========= */
body {
  font-family: 'Poppins', sans-serif;
}

.bg-cream {
  /* zachtere SaaS-achtergrond dan de originele template */
  background-color: #F4FBFF;
}

.text-darken {
  color: #0B2430;
}

/* CTA accent (houdt Skilline vibe, maar past bij “alert/actie”) */
.bg-yellow-500 { background-color: #F48C06; }
.text-yellow-500 { color: #F48C06; }

/* =========
   Floating animations (template)
   ========= */
.floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes floating {
  0%   { transform: translate(0, 0px); }
  50%  { transform: translate(0, 8px); }
  100% { transform: translate(0, -0px); }
}

.floating-4 {
  animation-name: floating4;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
@keyframes floating4 {
  0%   { transform: translate(0, 0px); }
  50%  { transform: translate(0, 8px); }
  100% { transform: translate(0, -0px); }
}

/* =========
   Product mock styling (rechts in hero)
   ========= */
.mock-window {
  border: 1px solid rgba(0,0,0,0.06);
}

.mock-topbar {
  background: #F3F4F6;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.dot.red { background: #EF4444; }
.dot.yellow { background: #F59E0B; }
.dot.green { background: #10B981; }

.badge-live {
  font-size: 11px;
  font-weight: 700;
  color: #065F46;
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.30);
  padding: 6px 10px;
  border-radius: 999px;
}

.ticket {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 12px;
}

.status {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  white-space: nowrap;
}
.status.urgent {
  color: #991B1B;
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.25);
}
.status.normal {
  color: #1F2937;
  background: rgba(17,24,39,0.06);
  border-color: rgba(17,24,39,0.10);
}

.chip {
  font-size: 11px;
  color: #334155;
  background: rgba(148,163,184,0.12);
  border: 1px solid rgba(148,163,184,0.20);
  padding: 5px 8px;
  border-radius: 999px;
}

.mini-row {
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 10px 12px;
}

.task {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 10px 12px;
}
.task-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #F48C06;
  box-shadow: 0 0 0 4px rgba(244,140,6,0.15);
}

/* Small pill list in workflow cards */
.pillline {
  display: inline-block;
  font-size: 12px;
  color: #475569;
  background: rgba(148,163,184,0.10);
  border: 1px solid rgba(148,163,184,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  margin: 6px 6px 0 0;
}

/* ============================
   FIX: dubbele scrollbars + inner scrollbar
   ============================ */

/* 1) Voorkom dat iets ooit horizontaal kan overflowen */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* In moderne browsers voorkomt dit horizontale overflow door transforms/absolute children */
body {
  position: relative;
  overflow-x: clip; /* fallback: overflow-x hidden hierboven */
}

/* 2) Zorg dat brede elementen niet stiekem breder worden dan de viewport */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* 3) Verberg alle zichtbare scrollbars (ook die “midden in de content”),
      zonder scrolling uit te zetten */
* {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
*::-webkit-scrollbar {
  width: 0;
  height: 0;
}