:root {
  color-scheme: dark;
  --bg: #031523;
  --bg2: #061c2d;
  --panel: #071d2e;
  --panel2: #0a2236;
  --line: #153c5a;
  --line-soft: rgba(111,174,218,.18);
  --text: #f4f8ff;
  --muted: #a7bdd2;
  --red: #ff1e2f;
  --red2: #be0717;
  --green: #19ef69;
  --blue: #087bea;
  --yellow: #ffc91d;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #02111d; color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100dvh; overflow-x: hidden; overscroll-behavior-y: contain; }
button, input { font: inherit; }
button { touch-action: manipulation; }
.hidden { display: none !important; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 0%, rgba(10,71,112,.30), transparent 34%),
    radial-gradient(circle at 92% 8%, rgba(0,98,150,.16), transparent 30%),
    linear-gradient(180deg, #031523 0%, #02111c 55%, #031624 100%);
}

.app-shell {
  position: relative;
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(18px + var(--safe-top)) 16px calc(98px + var(--safe-bottom));
}

.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 4px 18px;
}

.brand-lockup { min-width: 0; }
.brand-row { display: flex; align-items: center; gap: 9px; height: 53px; }
.brand-112 {
  color: var(--red);
  font-size: clamp(42px, 12vw, 58px);
  font-weight: 1000;
  font-style: italic;
  letter-spacing: -5px;
  line-height: .9;
  text-shadow: 0 0 18px rgba(255,30,47,.32);
}
.brand-pager {
  color: #fff;
  font-size: clamp(25px, 7vw, 34px);
  font-weight: 950;
  font-style: italic;
  letter-spacing: .03em;
  line-height: 1;
}
.heartbeat { width: 62px; height: 42px; overflow: visible; }
.heartbeat path { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(255,30,47,.6)); }
.brand-sub { margin-top: -2px; color: #eaf3fb; font-size: 12px; font-style: italic; letter-spacing: .16em; white-space: nowrap; }

.live-badge { margin-top: 10px; text-align: right; flex: 0 0 auto; }
.live-line { display: flex; align-items: center; justify-content: flex-end; gap: 9px; color: var(--green); font-size: 18px; }
.live-dot { width: 14px; height: 14px; border-radius: 50%; background: #5c6875; box-shadow: 0 0 0 transparent; }
.live-badge.online .live-dot { background: var(--green); box-shadow: 0 0 15px rgba(25,239,105,.85); }
.live-badge.offline .live-line { color: #8796a5; }
.live-badge small { display: block; margin-top: 2px; color: #d4e0ea; font-size: 11px; }

.main { min-height: 70vh; }
.view { display: none; }
.view.active-view { display: block; animation: viewIn .18s ease; }
@keyframes viewIn { from { opacity: .45; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 3px 0 15px; }
.service-btn {
  min-height: 96px;
  border: 1px solid #1a4263;
  border-radius: 14px;
  background: linear-gradient(160deg, #0b2236, #061828 80%);
  color: #d7e6f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 20px rgba(0,0,0,.14);
}
.service-btn .service-icon { font-size: 30px; line-height: 1; }
.service-btn b { font-size: 13px; font-weight: 700; }
.service-btn.active.fire { background: linear-gradient(160deg, #c60c19, #8f0711); border-color: #ff4250; color: #fff; box-shadow: 0 0 18px rgba(255,30,47,.45), inset 0 0 15px rgba(255,255,255,.08); }
.service-btn.active.ambu { background: linear-gradient(160deg, #ffd54a, #d9a208); border-color: #ffe27c; color:#132033; box-shadow: 0 0 18px rgba(255,210,69,.35); }
.service-btn.active.police { background: linear-gradient(160deg, #205d99, #0a365e); border-color: #62afff; color:#fff; box-shadow: 0 0 18px rgba(35,139,255,.35); }
.service-btn.active.all { background: linear-gradient(160deg, #0b63bd, #083d75); border-color: #55a9ff; color:#fff; }
.grid-icon { font-size: 34px !important; }

.incident-card {
  position: relative;
  border: 2px solid #f22332;
  border-radius: 20px;
  padding: 19px 20px 18px;
  background:
    radial-gradient(circle at 20% 5%, rgba(213,22,36,.16), transparent 34%),
    linear-gradient(160deg, rgba(31,13,20,.95), rgba(6,19,31,.97) 58%, rgba(4,18,29,.98));
  box-shadow: 0 0 22px rgba(255,30,47,.42), inset 0 0 26px rgba(255,28,44,.08);
  overflow: hidden;
}
.incident-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.025), transparent 25%, transparent 70%, rgba(255,255,255,.015));
}
.incident-card.priority-p2, .incident-card.priority-a2 { border-color: #e9a400; box-shadow: 0 0 20px rgba(255,190,20,.28), inset 0 0 24px rgba(255,184,0,.05); }
.incident-card.priority-p3, .incident-card.priority-b { border-color: #0d7bd9; box-shadow: 0 0 20px rgba(0,125,235,.28); }
.incident-card.acknowledged { box-shadow: inset 0 0 24px rgba(255,255,255,.025); opacity: .94; }
.incident-card.alarm { animation: cardPulse .72s ease-in-out infinite alternate; }
@keyframes cardPulse { from { filter: brightness(1); } to { filter: brightness(1.14); } }

.incident-header { display: grid; grid-template-columns: 78px minmax(0,1fr) auto; align-items: center; gap: 16px; }
.priority-square {
  height: 72px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #ff2d3c, #ca0716);
  color: white;
  font-size: 34px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px rgba(255,31,48,.3);
}
.priority-p2 .priority-square, .priority-a2 .priority-square { background: linear-gradient(145deg,#ffd43b,#e5a900); color: #122033; box-shadow: none; }
.priority-p3 .priority-square, .priority-b .priority-square { background: linear-gradient(145deg,#168ae8,#065ca8); box-shadow: none; }
.discipline-title { font-size: clamp(24px, 7vw, 34px); font-weight: 950; letter-spacing: .02em; white-space: nowrap; }
.incident-stamp { display: grid; gap: 5px; text-align: right; color: #c9d9ea; font-size: 12px; white-space: nowrap; }
.incident-title { margin-top: 20px; font-size: clamp(25px, 7vw, 35px); line-height: 1.05; font-weight: 950; text-transform: uppercase; letter-spacing: -.02em; }

.location-row { margin-top: 18px; display: flex; align-items: flex-start; gap: 14px; }
.pin-icon { position: relative; width: 26px; flex: 0 0 26px; color: #b9ccff; font-size: 22px; transform: rotate(45deg); text-shadow: 0 0 8px rgba(115,160,255,.4); }
.location-row div { min-width: 0; }
.location-row b { display: block; color: #cbdafd; font-size: 19px; line-height: 1.25; overflow-wrap: anywhere; }
.location-row small { display: block; margin-top: 6px; color: #b4c8dd; font-size: 14px; }

.vehicles-panel {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  padding: 15px 16px;
  border: 1px solid rgba(121,112,183,.38);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(20,31,52,.82), rgba(16,17,34,.78));
  box-shadow: inset 0 0 18px rgba(109,92,173,.08);
}
.vehicle-symbol { font-size: 31px; }
.vehicle-copy span { color: #b7c7e8; font-size: 13px; }
.vehicle-lines { display: grid; gap: 3px; margin-top: 6px; color: #c9d7f1; font-size: 15px; line-height: 1.32; }

.region-row { margin-top: 16px; display: flex; align-items: center; gap: 12px; color: #bacdec; font-size: 14px; }
.region-icon { color: #c4d9ff; transform: rotate(20deg); }
.raw-message { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(143,180,219,.13); color: #7f9ab3; font-size: 11px; line-height: 1.45; }
.source-link { display: inline-block; margin-top: 10px; color: #6f9fc7; font-size: 10px; text-decoration: none; }

.main-actions { display: grid; grid-template-columns: 1fr .84fr; gap: 12px; margin-top: 15px; }
.confirm-btn, .map-btn { min-height: 70px; border-radius: 15px; border: 1px solid; color: #fff; display: flex; align-items: center; justify-content: center; gap: 11px; font-size: 18px; font-weight: 900; }
.confirm-btn { background: linear-gradient(160deg,#27d55f,#079e36); border-color:#45ef77; box-shadow: 0 0 13px rgba(26,229,99,.20), inset 0 1px 0 rgba(255,255,255,.15); }
.map-btn { background: linear-gradient(160deg,#0d6fbf,#06417e); border-color:#1889e2; box-shadow: inset 0 1px 0 rgba(255,255,255,.10); }
.confirm-btn span, .map-btn span { font-size: 30px; line-height: 1; }
.map-btn:disabled { opacity: .48; filter: grayscale(.3); }

.shortcut-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 15px; }
.shortcut-btn { min-height: 78px; border:1px solid #17456b; border-radius:14px; background:linear-gradient(160deg,#0a2033,#061725); color:#dce9f7; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; }
.shortcut-btn span { font-size:20px; }
.shortcut-btn b { font-weight:700; }

.region-footer { margin: 25px 5px 2px; display: grid; grid-template-columns: 55px 1fr 70px; align-items:center; gap:10px; color:#a9bdd2; }
.region-mark { width:48px; height:48px; border-radius:50% 42% 48% 38%; display:grid; place-items:center; background:#b70b18; color:#02111d; font-weight:1000; font-style:italic; transform:rotate(-11deg); }
.region-footer span { display:block; font-size:11px; }
.region-footer b { display:block; margin-top:4px; color:#bcd0e3; font-size:12px; }
.hazard-bars { display:flex; justify-content:flex-end; gap:6px; }
.hazard-bars i { display:block; width:14px; height:36px; background:#c31925; transform:skew(-27deg); }

.segment-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; margin-bottom:16px; border:1px solid #123b5b; border-radius:12px; background:#061828; }
.segment-tabs button { min-height:55px; border:0; border-radius:10px; color:#b7cbe0; background:transparent; }
.segment-tabs button.active { color:#fff; background:linear-gradient(180deg,#0c65bf,#07447f); box-shadow:0 0 15px rgba(0,117,255,.24); }
.segment-tabs span { margin-right:5px; }

.history-list { border:1px solid #123b5b; border-radius:14px; overflow:hidden; background:rgba(3,20,33,.70); }
.history-empty { padding:32px 18px; text-align:center; color:#809bb4; }
.history-item { width:100%; display:grid; grid-template-columns:52px 34px 1fr auto 18px; gap:10px; align-items:center; padding:14px 12px; color:#fff; text-align:left; border:0; border-bottom:1px solid #17374f; background:transparent; }
.history-item:last-child { border-bottom:0; }
.history-priority { width:48px; height:48px; border-radius:8px; display:grid; place-items:center; background:#e51524; font-size:20px; font-weight:950; }
.history-priority.p2,.history-priority.a2 { background:#ffc920; color:#162235; }
.history-priority.p3,.history-priority.b { background:#0679dd; }
.history-service { font-size:24px; text-align:center; }
.history-copy { min-width:0; }
.history-copy b { display:block; font-size:14px; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-copy span { display:block; margin-top:4px; color:#d0dceb; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-copy small { display:block; margin-top:3px; color:#86a0b9; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.history-stamp { display:grid; gap:3px; text-align:right; color:#a9c1d7; font-size:10px; white-space:nowrap; }
.history-chevron { color:#91b5e9; font-size:23px; }

.settings-card { margin-bottom:14px; padding:18px; border:1px solid #153d5e; border-radius:16px; background:linear-gradient(160deg,#082035,#051725); }
.settings-card h2 { margin:0 0 10px; font-size:17px; }
.settings-card p { margin:12px 0 0; color:#8fa8bf; font-size:11px; line-height:1.5; }
.setting-row { min-height:68px; display:flex; justify-content:space-between; align-items:center; gap:18px; border-top:1px solid #12334d; }
.setting-row:first-of-type { border-top:0; }
.setting-row span { display:grid; gap:4px; }
.setting-row b { font-size:14px; }
.setting-row small { color:#8ca5bd; font-size:11px; }
.setting-row input { width:24px; height:24px; accent-color:#19d765; }
.settings-action { width:100%; min-height:65px; display:grid; grid-template-columns:35px 1fr; align-items:center; gap:10px; text-align:left; border:0; border-top:1px solid #12334d; background:transparent; color:#fff; }
.settings-action > span { font-size:22px; }
.settings-action div { display:grid; gap:4px; }
.settings-action small { color:#8ca5bd; font-size:11px; }
.settings-action.active { color:#43e879; }
.source-status { display:grid; grid-template-columns:12px 1fr auto; gap:10px; align-items:center; }
.source-dot { width:10px; height:10px; border-radius:50%; background:#20e86a; box-shadow:0 0 10px rgba(32,232,106,.7); }
.source-status div { min-width:0; }
.source-status b { display:block; font-size:14px; }
.source-status small { display:block; margin-top:3px; color:#8ca5bd; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.free-badge { padding:6px 8px; border-radius:999px; background:rgba(26,232,106,.1); border:1px solid rgba(26,232,106,.25); color:#25e670; font-size:9px; font-weight:900; }

.bottom-nav { position:fixed; z-index:30; bottom:0; left:50%; transform:translateX(-50%); width:min(560px,100%); display:grid; grid-template-columns:repeat(4,1fr); padding:8px 10px calc(8px + var(--safe-bottom)); background:rgba(4,20,33,.96); border-top:1px solid #123b5b; backdrop-filter:blur(18px); }
.nav-btn { min-height:63px; border:0; border-radius:12px; background:transparent; color:#a8bfd4; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; }
.nav-btn span { font-size:24px; }
.nav-btn b { font-size:10px; font-weight:500; }
.nav-btn.active { color:#2392ff; background:rgba(14,89,151,.18); }

.toast { position:fixed; z-index:80; left:50%; bottom:calc(87px + var(--safe-bottom)); transform:translateX(-50%) translateY(15px); max-width:calc(100% - 30px); padding:11px 14px; border-radius:12px; background:#eef6ff; color:#06131e; font-weight:800; font-size:12px; opacity:0; pointer-events:none; transition:.2s ease; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width: 400px) {
  .app-shell { padding-left:12px; padding-right:12px; }
  .hero-header { gap:7px; }
  .brand-row { gap:6px; }
  .brand-112 { font-size:42px; }
  .brand-pager { font-size:25px; }
  .heartbeat { width:47px; }
  .brand-sub { font-size:10px; }
  .live-line { font-size:15px; gap:6px; }
  .service-btn { min-height:84px; }
  .service-btn b { font-size:11px; }
  .service-btn .service-icon { font-size:25px; }
  .incident-card { padding:16px 15px; }
  .incident-header { grid-template-columns:64px minmax(0,1fr) auto; gap:10px; }
  .priority-square { height:62px; font-size:29px; }
  .discipline-title { font-size:23px; }
  .incident-stamp { font-size:10px; }
  .incident-title { font-size:26px; }
  .location-row b { font-size:16px; }
  .main-actions { gap:8px; }
  .confirm-btn,.map-btn { min-height:64px; font-size:15px; }
  .shortcut-btn { min-height:70px; font-size:11px; gap:5px; }
  .region-footer { grid-template-columns:46px 1fr 55px; }
  .hazard-bars i { width:10px; height:30px; }
  .history-item { grid-template-columns:46px 27px 1fr auto 12px; gap:7px; padding:12px 9px; }
  .history-priority { width:43px; height:43px; }
}

@media (display-mode: standalone) {
  .app-shell { user-select:none; }
}


/* v1.4 — regiofilter */
.region-filter-card,
.history-filter-bar {
  margin: -2px 0 15px;
  min-height: 64px;
  border: 1px solid #18496f;
  border-radius: 14px;
  background: linear-gradient(160deg, #09233a, #061827);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.region-filter-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(155px, .9fr);
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
}

.region-filter-copy {
  display: grid;
  grid-template-columns: 33px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.region-filter-icon {
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(18,123,234,.16);
  color: #67b5ff;
  font-size: 20px;
}

.region-filter-copy div,
.history-filter-bar div { min-width: 0; }

.region-filter-copy small,
.history-filter-bar small {
  display: block;
  color: #7195b4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.region-filter-copy b,
.history-filter-bar b {
  display: block;
  margin-top: 3px;
  color: #f1f7ff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.region-select {
  width: 100%;
  min-width: 0;
  height: 43px;
  padding: 0 34px 0 11px;
  border: 1px solid #23608d;
  border-radius: 11px;
  outline: none;
  background: #071b2d;
  color: #e8f4ff;
  font-size: 12px;
  font-weight: 700;
}

.region-select:focus {
  border-color: #2b96ef;
  box-shadow: 0 0 0 3px rgba(28,133,226,.14);
}

.history-filter-bar {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(160px, .9fr);
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
}

.region-select.compact { height: 40px; }

.history-empty small {
  display: inline-block;
  margin-top: 6px;
  color: #66839d;
}

@media (max-width: 400px) {
  .region-filter-card,
  .history-filter-bar {
    grid-template-columns: 1fr;
  }

  .region-filter-card { gap: 8px; }
  .region-select { height: 44px; }
}


/* v1.5 — compactere mobiele layout */
.pager-card {
  padding: 10px;
  border-radius: 18px;
}

.pager-head {
  margin-bottom: 7px;
}

.pager-screen,
.classic-p2000 {
  min-height: 200px !important;
}

.incident-card,
.alert-card,
.current-alert,
.current-incident {
  min-height: 0 !important;
}

.pager-actions.single-action {
  display: block;
  margin-top: 10px;
}

.pager-actions.single-action .secondary-action,
.pager-actions.single-action #mapButton {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
}

.service-grid {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.service-btn {
  min-height: 92px !important;
  padding: 10px 5px !important;
  border-radius: 18px !important;
}

.service-btn .service-icon {
  font-size: 28px !important;
}

.service-btn b {
  font-size: 13px !important;
}

.region-filter-card {
  min-height: 0 !important;
  padding: 9px 10px !important;
  margin-bottom: 12px !important;
}

.main,
.view {
  padding-top: 10px !important;
}

.history-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0 12px;
}

.clear-history-button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 73, 73, .36);
  border-radius: 12px;
  background: rgba(176, 24, 32, .14);
  color: #ff7b82;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .04em;
}

.clear-history-button:active {
  transform: translateY(1px);
}

.history-item {
  padding: 9px !important;
  border-radius: 13px !important;
}

.history-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 11px !important;
}

@media (max-width: 430px) {
  .pager-card {
    padding: 9px;
  }

  .service-btn {
    min-height: 84px !important;
  }

  .pager-screen,
  .classic-p2000 {
    min-height: 180px !important;
  }

  .quick-actions {
    gap: 7px !important;
  }

  .quick-btn {
    min-height: 58px !important;
  }
}


/* v1.6 — echte fix voor mobiel */
.main-actions.map-only {
  display: block !important;
  margin-top: 11px !important;
}

.main-actions.map-only .map-btn {
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 14px !important;
}

.incident-card {
  padding: 14px 15px 13px !important;
  border-radius: 18px !important;
}

.incident-header {
  grid-template-columns: 66px minmax(0,1fr) auto !important;
  gap: 10px !important;
}

.priority-square {
  height: 62px !important;
  font-size: 29px !important;
}

.discipline-title {
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: clamp(20px, 5.6vw, 28px) !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.incident-title {
  margin-top: 14px !important;
  font-size: clamp(22px, 6.2vw, 31px) !important;
}

.region-row {
  margin-top: 12px !important;
  padding-top: 9px;
  border-top: 1px solid rgba(143,180,219,.12);
  font-size: 13px !important;
  line-height: 1.25;
}

.region-row #regionText {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}

.main-actions .confirm-btn,
#ackButton {
  display: none !important;
}

@media (max-width: 400px) {
  .incident-card {
    padding: 12px 13px !important;
  }

  .incident-header {
    grid-template-columns: 58px minmax(0,1fr) auto !important;
    gap: 8px !important;
  }

  .priority-square {
    height: 56px !important;
    font-size: 26px !important;
  }

  .discipline-title {
    font-size: 20px !important;
  }

  .incident-title {
    font-size: 24px !important;
  }

  .incident-stamp {
    font-size: 9px !important;
  }

  .main-actions.map-only .map-btn {
    min-height: 50px !important;
    font-size: 14px !important;
  }
}


/* v1.7 — compactere tekst en gegarandeerd passende tegel */
.incident-card {
  padding: 11px 12px 10px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.incident-header {
  grid-template-columns: 50px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  align-items: center !important;
}

.priority-square {
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  border-radius: 11px !important;
  font-size: 22px !important;
}

.discipline-title {
  min-width: 0 !important;
  max-width: 100% !important;
  font-size: 17px !important;
  line-height: 1.1 !important;
  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-overflow: clip !important;
}

.incident-stamp {
  font-size: 8px !important;
  line-height: 1.15 !important;
  min-width: 58px !important;
}

.incident-title {
  margin-top: 11px !important;
  font-size: 21px !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.region-row {
  margin-top: 9px !important;
  padding-top: 7px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.region-row #regionText {
  font-size: 11px !important;
  font-weight: 700 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.main-actions.map-only {
  margin-top: 8px !important;
}

.main-actions.map-only .map-btn {
  min-height: 44px !important;
  font-size: 12px !important;
  border-radius: 12px !important;
}

@media (max-width: 430px) {
  .incident-card {
    padding: 10px 11px 9px !important;
  }

  .incident-header {
    grid-template-columns: 46px minmax(0,1fr) auto !important;
    gap: 7px !important;
  }

  .priority-square {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    font-size: 20px !important;
  }

  .discipline-title {
    font-size: 15px !important;
  }

  .incident-title {
    font-size: 19px !important;
  }

  .region-row,
  .region-row #regionText {
    font-size: 10px !important;
  }

  .main-actions.map-only .map-btn {
    min-height: 42px !important;
    font-size: 11px !important;
  }
}


/* v1.8 — kleur meldingstegel op basis van gekozen dienst */
.incident-card.theme-fire {
  border-color: #f22332 !important;
  background:
    radial-gradient(circle at 20% 5%, rgba(213,22,36,.16), transparent 34%),
    linear-gradient(160deg, rgba(31,13,20,.95), rgba(6,19,31,.97) 58%, rgba(4,18,29,.98)) !important;
  box-shadow: 0 0 22px rgba(255,30,47,.42), inset 0 0 26px rgba(255,28,44,.08) !important;
}

.incident-card.theme-ambu {
  border-color: #f1c232 !important;
  background:
    radial-gradient(circle at 20% 5%, rgba(255,213,74,.16), transparent 34%),
    linear-gradient(160deg, rgba(36,28,8,.95), rgba(25,22,8,.97) 58%, rgba(17,18,10,.98)) !important;
  box-shadow: 0 0 22px rgba(255,209,77,.34), inset 0 0 26px rgba(255,214,87,.08) !important;
}

.incident-card.theme-police {
  border-color: #2d8df2 !important;
  background:
    radial-gradient(circle at 20% 5%, rgba(45,141,242,.16), transparent 34%),
    linear-gradient(160deg, rgba(10,22,37,.95), rgba(7,18,31,.97) 58%, rgba(5,16,29,.98)) !important;
  box-shadow: 0 0 22px rgba(45,141,242,.32), inset 0 0 26px rgba(72,154,255,.08) !important;
}

.incident-card.theme-all {
  border-color: #f22332 !important;
  background:
    radial-gradient(circle at 20% 5%, rgba(213,22,36,.16), transparent 34%),
    linear-gradient(160deg, rgba(31,13,20,.95), rgba(6,19,31,.97) 58%, rgba(4,18,29,.98)) !important;
  box-shadow: 0 0 22px rgba(255,30,47,.42), inset 0 0 26px rgba(255,28,44,.08) !important;
}


/* v2.0 — echte hulpdienstlogo's */
.service-icon {
  display: grid;
  place-items: center;
  line-height: 1;
}

.service-logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.08));
}

.inline-service-logo {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.10));
}

.inline-service-logo.tiny {
  width: 22px;
  height: 22px;
}

.inline-service-logo.medium {
  width: 31px;
  height: 31px;
}

.vehicle-symbol {
  display: grid;
  place-items: start center;
  min-height: 34px;
}

.history-service {
  display: grid;
  place-items: center;
  min-width: 34px;
}

.history-service .inline-service-logo.tiny {
  width: 24px;
  height: 24px;
}

@media (max-width: 400px) {
  .service-logo {
    width: 34px;
    height: 34px;
  }
}


/* v2.4 — bronstatus + attribution */
.source-status-secondary {
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid #12334d;
}

.source-dot.source-error {
  background: #ff4354;
  box-shadow: 0 0 10px rgba(255,67,84,.65);
}

.source-dot.source-active {
  background: #ffd247;
  box-shadow: 0 0 10px rgba(255,210,71,.70);
}

.source-credit a,
.data-credit a {
  color: #70a8d7;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.data-credit {
  margin: 18px 4px -10px;
  color: #6f8ca5;
  font-size: 9px;
  text-align: center;
}


/* v2.5 — luxere meldingskaart */
.incident-card {
  isolation: isolate;
}

.incident-card > *:not(.incident-watermark) {
  position: relative;
  z-index: 2;
}

.incident-watermark {
  position: absolute;
  z-index: 1;
  right: -14px;
  bottom: -18px;
  width: 138px;
  height: 138px;
  object-fit: contain;
  opacity: .075;
  pointer-events: none;
  filter: grayscale(.08) drop-shadow(0 0 16px rgba(255,255,255,.08));
  transform: rotate(-5deg);
}

.priority-cluster {
  display: grid;
  gap: 4px;
  justify-items: stretch;
}

.priority-caption {
  display: block;
  text-align: center;
  color: #8fa8bf;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1;
}

.mini-map {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  height: 118px;
  border: 1px solid rgba(94,145,189,.28);
  border-radius: 12px;
  background: #061624;
  box-shadow: inset 0 0 18px rgba(0,0,0,.18);
}

.mini-map-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(.85) brightness(.86) contrast(1.06);
}

.mini-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2,17,29,.04), rgba(2,17,29,.22));
}

.mini-map-open {
  position: absolute;
  z-index: 3;
  right: 8px;
  bottom: 8px;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(117,181,235,.45);
  border-radius: 9px;
  background: rgba(4,24,40,.88);
  color: #dcebfa;
  font-size: 9px;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.incident-card.new-arrival {
  animation: newAlertIn .38s cubic-bezier(.2,.85,.3,1), newAlertGlow 1.2s ease-in-out .38s 2 alternate;
}

@keyframes newAlertIn {
  from {
    opacity: .45;
    transform: translateY(12px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes newAlertGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}

.incident-card.theme-fire.new-arrival {
  box-shadow: 0 0 30px rgba(255,30,47,.56), inset 0 0 28px rgba(255,28,44,.11) !important;
}

.incident-card.theme-ambu.new-arrival {
  box-shadow: 0 0 30px rgba(255,209,77,.50), inset 0 0 28px rgba(255,214,87,.11) !important;
}

.incident-card.theme-police.new-arrival {
  box-shadow: 0 0 30px rgba(45,141,242,.48), inset 0 0 28px rgba(72,154,255,.11) !important;
}

@media (max-width: 400px) {
  .incident-watermark {
    width: 116px;
    height: 116px;
    right: -12px;
    bottom: -12px;
  }

  .mini-map {
    height: 100px;
  }

  .priority-caption {
    font-size: 6px;
  }
}