.p2000-monitor {
  --pm-border: rgba(255,255,255,.10);
  width: 100%;
  height: var(--p2000-monitor-height, 600px);
  min-height: 440px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  color: #f3f6f8;
  background:
    linear-gradient(rgba(5,8,12,.86), rgba(5,8,12,.95)),
    url("hulpdiensten-bg.png") center center / cover no-repeat,
    #07090c;
  border: 1px solid var(--pm-border);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
  font-family: Arial, Helvetica, sans-serif;
}

.p2000-monitor *,
.p2000-monitor *::before,
.p2000-monitor *::after { box-sizing: border-box; }

.p2000-monitor-head {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: rgba(4,7,10,.94);
  border-bottom: 1px solid var(--pm-border);
}

.p2000-monitor-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.p2000-monitor-pager { font-size: 34px; }

.p2000-monitor-title {
  font-size: clamp(21px,2vw,30px);
  font-weight: 800;
  line-height: 1;
}

.p2000-monitor-subtitle {
  margin-top: 6px;
  color: #ffcf32;
  font: 700 12px/1.2 "Courier New", monospace;
  letter-spacing: .13em;
}

.p2000-monitor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.p2000-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid rgba(57,215,116,.28);
  border-radius: 999px;
  background: rgba(24,100,51,.20);
  color: #7cf2a7;
  font: 700 12px/1 "Courier New", monospace;
}

.p2000-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #39d774;
  box-shadow: 0 0 10px rgba(57,215,116,.9);
  animation: pm-pulse 1.4s infinite;
}

@keyframes pm-pulse { 50% { opacity: .35; } }

.p2000-monitor-clock {
  font: 700 17px/1 "Courier New", monospace;
  color: #fff;
}

.p2000-monitor-sound {
  appearance: none;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.06);
  color: #fff;
  width: 34px;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
}

.p2000-monitor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  background: rgba(8,11,15,.92);
  border-bottom: 1px solid var(--pm-border);
}

.p2000-monitor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.p2000-filter {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  background: rgba(255,255,255,.05);
  color: #d9e0e6;
  padding: 6px 9px;
  font-size: 12px;
  cursor: pointer;
}

.p2000-filter:hover,
.p2000-filter.is-active {
  background: rgba(255,207,50,.16);
  border-color: rgba(255,207,50,.42);
  color: #ffe47c;
}

.p2000-monitor-auto {
  color: #7cf2a7;
  font: 700 10px/1 "Courier New", monospace;
  white-space: nowrap;
}

.p2000-monitor-statusbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 14px;
  background: rgba(0,0,0,.38);
  color: #aab5be;
  border-bottom: 1px solid rgba(255,255,255,.07);
  font: 12px/1.2 "Courier New", monospace;
}

.p2000-monitor-state.is-error { color: #ff7777; }

.p2000-monitor-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #4b5660 #10151b;
  background: rgba(2,5,8,.60);
}

.p2000-monitor-loading,
.p2000-monitor-empty {
  padding: 36px 18px;
  color: #96a2ac;
  text-align: center;
}

.p2000-monitor-item {
  position: relative;
  display: grid;
  grid-template-columns: 104px 116px minmax(0,1fr);
  min-height: 86px;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(10,14,18,.82);
  transition: background .2s ease;
}

.p2000-monitor-item:hover { background: rgba(20,25,31,.96); }
.p2000-monitor-item.is-new { animation: pm-new 3s ease-out; }

@keyframes pm-new {
  from {
    background: rgba(255,213,58,.28);
    box-shadow: inset 5px 0 0 #ffd53a;
  }
  to {
    background: rgba(10,14,18,.82);
    box-shadow: inset 5px 0 0 transparent;
  }
}

.p2000-monitor-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
}

.service-brandweer::before { background: #ff493b; }
.service-ambulance::before { background: #ffe13d; }
.service-politie::before { background: #4da6ff; }
.service-mmt::before { background: #bb7cff; }
.service-overig::before { background: #9aa5ae; }

.p2000-item-time,
.p2000-item-service,
.p2000-item-body { padding: 13px 12px; }

.p2000-item-time {
  border-right: 1px solid rgba(255,255,255,.065);
  padding-left: 16px;
  font-family: "Courier New", monospace;
}

.p2000-item-time strong {
  display: block;
  font-size: 17px;
  color: #fff;
}

.p2000-item-time span {
  display: block;
  margin-top: 5px;
  color: #8e9aa4;
  font-size: 11px;
}

.p2000-item-service {
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid rgba(255,255,255,.065);
}

.p2000-service-icon { font-size: 20px; }

.p2000-service-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}

.p2000-item-body { min-width: 0; }

.p2000-item-topline {
  min-height: 20px;
  margin-bottom: 4px;
}

.p2000-item-message {
  color: #f4f7f9;
  font: 700 15px/1.35 "Courier New", monospace;
  overflow-wrap: anywhere;
}

.p2000-capcodes {
  margin-top: 7px;
  color: #82909b;
  font: 11px/1.25 "Courier New", monospace;
}

.p2000-priority {
  display: inline-block;
  min-width: 34px;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  font: 800 11px/1 "Courier New", monospace;
  text-align: center;
}

.p2000-priority.p-a0,
.p2000-priority.p-a1,
.p2000-priority.p-p1 {
  background: rgba(218,49,49,.28);
  border-color: rgba(255,79,79,.45);
  color: #ff8a82;
}

.p2000-priority.p-a2,
.p2000-priority.p-p2 {
  background: rgba(226,154,25,.22);
  border-color: rgba(255,183,51,.4);
  color: #ffc65b;
}

.p2000-priority.p-b1,
.p2000-priority.p-b2,
.p2000-priority.p-c1,
.p2000-priority.p-c2,
.p2000-priority.p-p3 {
  background: rgba(61,127,200,.18);
  border-color: rgba(93,166,245,.3);
  color: #8cc5ff;
}

.p2000-monitor-foot {
  padding: 7px 14px;
  background: rgba(4,7,10,.95);
  border-top: 1px solid var(--pm-border);
  color: #7f8a94;
  font-size: 10px;
  text-align: center;
}

@media (max-width: 760px) {
  .p2000-monitor { min-height: 520px; }

  .p2000-monitor-head {
    min-height: 66px;
    padding: 10px 12px;
  }

  .p2000-monitor-pager { font-size: 26px; }
  .p2000-monitor-title { font-size: 20px; }
  .p2000-monitor-subtitle { font-size: 10px; }
  .p2000-live { display: none; }

  .p2000-monitor-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .p2000-monitor-auto { display: none; }

  .p2000-monitor-item {
    grid-template-columns: 82px minmax(0,1fr);
  }

  .p2000-item-time {
    grid-row: 1 / span 2;
    padding-left: 11px;
  }

  .p2000-item-service {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    padding: 8px 10px 4px;
  }

  .p2000-item-body { padding: 5px 10px 12px; }
  .p2000-item-message { font-size: 13px; }
  .p2000-capcodes { font-size: 10px; }
}