@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Core monitor stylesheet.
   Keep behavior documentation here because markup is generated dynamically
   by index.php (frontend) and engine.php (polling backend). */
/* =======================================================================
   Toast notifications (banners)
   ======================================================================= */
:root{
  --topbar-h: 48px; /* was 54px */
  --logo-offset: 18px;
  --color-bg: #0d1117;
  --color-text: #79d4e8;
  --color-link: #52bbd4;
  --color-link-visited: #79d4e8;
  --color-topbar-bg: linear-gradient(90deg, #0b1220 0%, #0e1628 100%);
  --color-topbar-border: rgba(255,255,255,0.06);
  --color-topbar-text: #e5e7eb;
  --color-topbar-muted: #cbd5f5;
  --color-chip-bg: rgba(255,255,255,0.08);
  --color-panel-bg: rgba(15, 23, 42, 0.92);
  --color-toast-bg: rgba(15, 23, 42, 0.92);
  --color-toast-border: rgba(255,255,255,.10);
  --color-toast-text: #e5e7eb;
  --color-zoom-bg: #444;
  --color-zoom-text: #fff;
  --color-sysmessage-bg: #223;
  --color-sysmessage-text: #fff;
  --color-surface: #0b0f1a;
  --color-surface-2: #0f172a;
  --color-border-strong: rgba(255,255,255,0.06);
  --color-border-soft: rgba(255,255,255,0.10);
  --color-row-sep: rgba(255,255,255,0.08);
  --color-divider: rgba(255,255,255,0.06);
  --color-text-strong: #e8f2ff;
  --color-text-muted: #a9b6c7;
  --color-table-head: #9cf;
  --color-type: #3db370;
  --color-capcode: #fff;
  --color-hit: #fff;
  --color-msg: #9cf;
  --color-brw: #f55;
  --color-inc-text: #fff;
  --color-inc-bg: #f00;
  --color-tip-bg: #2a1600;
  --color-tip-text: #fff;
  --color-notice-border: rgba(255,255,255,0.22);
  --color-notice-link: #0ea5e9;
  --color-progress-bg: black;
  --color-progress-fill: black;
  --color-highlight: rgb(85, 91, 255);
  --color-card-bg: rgba(255,255,255,0.02);
  --color-card-bg-2: rgba(255,255,255,0.04);
  --color-card-bg-hover: rgba(255,255,255,0.05);
  --color-card-bg-hover-2: rgba(255,255,255,0.08);
  --color-card-border: rgba(255,255,255,0.04);
  --color-card-shadow: 0 2px 8px rgba(0,0,0,0.22);
  --footer-btn-shadow: 0 1px 2px rgba(0,0,0,.35);
  --footer-btn-shadow-hover: 0 4px 10px rgba(0,0,0,.35);
  --footer-btn-outline: rgba(96,165,250,.85);
}

/* Fallback font-size, JS zet deze hard op basis van dropdown */
html{
  font-size: 16px;
}

html[data-theme="light"]{
  --color-bg: #f4f6f9;
  --color-text: #0b1220;
  --color-link: #0b61d8;
  --color-link-visited: #0a54b8;
  --color-topbar-bg: linear-gradient(90deg, #f1f4f8 0%, #e9eef5 100%);
  --color-topbar-border: rgba(15,23,42,0.08);
  --color-topbar-text: #0b1220;
  --color-topbar-muted: #334155;
  --color-chip-bg: rgba(15,23,42,0.06);
  --color-panel-bg: #eef2f7;
  --color-toast-bg: #ffffff;
  --color-toast-border: rgba(15,23,42,0.12);
  --color-toast-text: #0b1220;
  --color-zoom-bg: #e2e8f0;
  --color-zoom-text: #0b1220;
  --color-sysmessage-bg: #e2e8f0;
  --color-sysmessage-text: #0b1220;
  --color-surface: #ffffff;
  --color-surface-2: #f7f9fc;
  --color-border-strong: rgba(15,23,42,0.22);
  --color-border-soft: rgba(15,23,42,0.12);
  --color-row-sep: rgba(15,23,42,0.12);
  --color-divider: rgba(15,23,42,0.12);
  --color-text-strong: #0b1220;
  --color-text-muted: #334155;
  --color-table-head: #1e3a8a;
  --color-type: #0f7a2b;
  --color-capcode: #0b1220;
  --color-hit: #0b1220;
  --color-msg: #1f3b8a;
  --color-inc-text: #0b1220;
  --color-inc-bg: #ffd4d4;
  --color-tip-bg: #fff3e0;
  --color-tip-text: #2b1b00;
  --color-notice-border: rgba(15,23,42,0.18);
  --color-notice-link: #0b61d8;
  --color-progress-bg: #94a3b8;
  --color-progress-fill: #0f172a;
  --color-highlight: rgb(30, 64, 175);
  --color-card-bg: #ffffff;
  --color-card-bg-2: #f7f9fc;
  --color-card-bg-hover: #f8fafc;
  --color-card-bg-hover-2: #eef2f7;
  --color-card-border: #e4e7ec;
  --color-card-shadow: 0 2px 8px rgba(15,23,42,0.08);
  --footer-btn-shadow: 0 1px 2px rgba(15,23,42,.18);
  --footer-btn-shadow-hover: 0 4px 10px rgba(15,23,42,.22);
  --footer-btn-outline: rgba(2,132,199,.9);
}
/* Light mode tooltip accent */
html[data-theme="light"] #p2ktooltip{
	background: linear-gradient(180deg, #fff3e0 0%, #ffe8c2 100%);
	border-color: rgba(180,120,0,0.35);
	color: #2b1b00;
	box-shadow:
		0 10px 24px rgba(15,23,42,0.18),
		0 0 12px rgba(180,120,0,0.18);
}
#toast-container{
  position: fixed;
  top: calc(var(--topbar-h) + 12px);              /* onder de topbar */
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, calc(100vw - 24px));
  z-index: 9999;
  pointer-events: none;
}

.toast{
  pointer-events: auto;
  margin: 10px auto;
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border: 1px solid var(--color-toast-border);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}

.toast-show{ opacity: 1; transform: translateY(0); }
.toast-hide{ opacity: 0; transform: translateY(-10px); }

.toast-inner{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-toast-bg);
}

.toast-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  background: var(--color-chip-bg);
  border: 1px solid var(--color-border-soft);
  flex: 0 0 auto;
}


.toast-message{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-toast-text);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.toast-close{
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: var(--color-chip-bg);
  color: var(--color-topbar-text);
  width: 28px;
  height: 28px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.toast-close:hover{ background: rgba(255,255,255,.14); }

.toast-progress{
  height: 3px;
  width: 100%;
  background: rgba(255,255,255,.10);
  position: relative;
}
.toast-progress::after{
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left;
  animation: toastProgress var(--toast-time, 10000ms) linear forwards;
}

.toast-info .toast-progress::after{ background: #60a5fa; }
.toast-success .toast-progress::after{ background: #34d399; }
.toast-warning .toast-progress::after{ background: #fbbf24; }
.toast-danger .toast-progress::after{ background: #fb7185; }

@keyframes toastProgress{
  from{ transform: scaleX(1); }
  to{ transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce){
  .toast{ transition: none; }
  .toast-progress::after{ animation: none; }
}

/* =======================================================================
   P2kFlex Monitor - UI quickwins (Topbar/Flex + Dark footer + Cleanup)
   TOPBAR – Modern Compact (48px)
   Bevat: Clock (links) + Bezoekers + Logo + Telegram (rechts)
   ============================================================ */

#topbar {

    /* Zorgt dat hij altijd bovenaan blijft */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;  /* Volledige breedte */
    height: 48px; /* Hoogte van de balk */
    background: var(--color-topbar-bg); /* Moderne gradient */
    border-bottom: 1px solid var(--color-topbar-border); /* Subtiele onderlijn */
    backdrop-filter: blur(10px);
    display: flex; /* Flex layout */
    align-items: center;        /* Verticaal centreren */
    justify-content: space-between;
    padding: 6 10px; /* Binnenruimte links/rechts */
    z-index: 2500; /* Zorgt dat hij boven alles blijft */

}

#topbar .topbar-left{
  display: flex;
  align-items: center;
  min-width: 120px;
}

#topbar .topbar-center{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(var(--logo-offset));
}

#topbar .topbar-right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px; /* was 8px */
}

#font-size-wrap{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#font-size-label{
  font-size: 12px;
  color: var(--color-topbar-muted);
  opacity: .9;
}
#fontSizeSelect{
  background: var(--color-chip-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-topbar-text);
  border-radius: 8px;
  padding: 5px 26px 5px 10px;
  font-size: 12px;
  line-height: 1;
  appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
#fontSizeSelect:focus{
  outline: 2px solid rgba(96,165,250,.75);
  outline-offset: 2px;
}
#fontSizeSelect:hover{
  filter: brightness(1.08);
}

.theme-toggle{
  background: var(--color-chip-bg);
  border: 1px solid var(--color-border-strong);
  color: var(--color-topbar-text);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
}
.theme-toggle:focus-visible{
  outline: 2px solid rgba(96,165,250,.75);
  outline-offset: 2px;
}
.theme-toggle:hover{
  filter: brightness(1.08);
}
.theme-toggle .theme-icon,
.theme-toggle i{
  transition: transform 0.3s ease;
}
.theme-toggle:hover .theme-icon,
.theme-toggle:hover i{
  transform: rotate(20deg);
}
.theme-toggle:focus{
  outline: 2px solid rgba(96,165,250,.75);
  outline-offset: 2px;
}

#topbar audio{ height: 22px; width: 220px; }
@media (max-width: 600px){ #topbar audio{ width: 140px; } }
#userwrap{
  text-decoration: none;
  color: inherit;

  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--color-chip-bg);
}

#audio, #userimg, #usercount, #telegram_logo, .clock, .p2kflex_logo{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
}
.p2kflex_logo img{ height: 34px; width:auto; display:block; }


#usercount{
  color: var(--color-topbar-text);
  font-size: 10px;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  padding-left: 0;
  text-align: left;
}

.clock{
  font-size: 1.1rem;
  line-height: 1;
  color: var(--color-topbar-muted);
  text-align: left;
  display: block;
  opacity: 1;
  transform: none;
  transition: none;
}

.p2kflex_logo{
  transition: none;
}

/* Give content room below fixed topbar */
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

::-webkit-scrollbar	/* For the entire document's scrollbars */
{
	width: 8px;	/* Adjust the width (size) as needed */
	height: 8px;	/* Adjust the height if vertical scrollbar */
}

::-webkit-scrollbar-track	/* Track (the area behind the thumb) */
{
	background: #f1f1f1;	/* Optional:  Color of the track */
}

::-webkit-scrollbar-thumb	/* Handle (the draggable thumb) */
{
	background: #888;	/* Optional:  Color of the thumb */
	border-radius: 4px;	/* Optional: Rounded corners */
}

::-webkit-scrollbar-thumb:hover	/* Handle on hover */
{
	background: #555;	/* Optional: Color on hover */
}

html
{
	overflow-y: scroll;
	scrollbar-width: thin; /*  'auto', 'thin', or 'none' */
}

/* ============================================================
   BELANGRIJK: BODY PADDING
   Moet gelijk zijn aan de topbar hoogte!
   Anders valt content onder de balk.
   ============================================================ */

body
{
	margin: 0px;
	padding: 0px;
	/*padding-top: var(--topbar-h); */
        padding-top: 48px;
	padding-bottom: 80px;      /* ruimte voor vaste footer onderaan */
	width: 100%;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	/* Fallback schaal: JS zet zoom direct op #result, niet op body */
}

a:link { color: var(--color-link); }
a:visited, a:hover, a:active { color: var(--color-link-visited); }

/* Live message table cells rendered from server response rows. */
.p2000 { width: 99%; margin: 3px auto auto 3px; }
.datetime { color: var(--color-table-head); vertical-align: top; white-space: nowrap; font-size: 14px; opacity: .7; width: 160px; min-width: 160px; }
.type  { color: var(--color-type); vertical-align: top; text-align: center; white-space: nowrap; width: 105px; min-width: 95px; }
.capcode { margin-left: 1px; color: var(--color-capcode); white-space: nowrap; text-align: center; font-weight: 700; letter-spacing: .2px; width: 105px; min-width: 95px; }
.hits { margin-left: 1px; text-align: right; color: var(--color-hit); white-space: nowrap; }

.MSGambu, .MSGbrw, .MSGpol, .MSGkw, .MSGrb, .MSGheli, .MSG, .MSGg { color: var(--color-msg); vertical-align: top; }
tr:not(.message-row):not(.melding) td.MSGbrw { color: var(--color-brw); }
.MSGn { color: #f00; vertical-align: top; }
.MSGinc { text-align: center; }

/* Color mapping classes (.cNN) emitted by backend label parser. */
.c01, .c02 { color: #ff0; }
.c03, .c18 { color: #f00; }
.c04, .c15 { color: #f90; }
.c05 { color: #60f; }
.c06 { color: #099; }
.c07 { color: #bbb; }
.c08 { color: #3c3; }
.c09 { color: #ccc; }
.c10 { color: #760; }
.c11 { color: #f3f; }
.c12, .c19 { color: #003df5; }
.c13 { color: #f3f; }
.c14 { color: #3d9; }
.c16 { color: #00f; }
.c17 { color: #cfc; }
.c20 { color: #3d9; }
.c21 { color: #f90; }

html[data-theme="light"] .c01,
html[data-theme="light"] .c02,
html[data-theme="light"] .c21{
	color: #9a5a00;
	font-weight: 700;
	background: rgba(255, 204, 51, 0.22);
	border-radius: 6px;
	padding: 2px 6px;
}

/* Incident badges; can be stacked as inc/inc1/inc2 or special mmt badge. */
.INC a:link { color: var(--color-inc-text); }
.INC a:visited { color: var(--color-inc-text); }
.INC a:hover { color: var(--color-link-visited); }
.INC
{
	display: block;
	background-color: var(--color-inc-bg);
	color: var(--color-inc-text);
	font-size: 11px;
	text-align: center;
	margin: -3px 0px;
	padding: 3px 10px;
	text-shadow: 1px 1px 2px black;
}
span#inc.INC	/* whole incident block */
{
	border-radius: 5px;
}
span#inc1.INC	/* first incident block */
{
	border-radius: 5px 5px 0px 0px;
}
span#inc2.INC	/* second incident block */
{
	border-radius: 0px 0px 5px 5px;
}
span#mmt.INC	/* MMT block */
{
	border-radius: 5px;
	background-color: orange;
	display: inline;
	margin: 0px;
	padding: 3px 5px;
}

#F
{
	margin-left: 3px;
}
#B
{
	color: #f96;
}

/* Tooltip styles for capcode/roepnummer helper popups. */
#p2ktooltip
{
	position: fixed; /* boven kaarten, niet geknipt door overflow */
	color: var(--color-tip-text);
	border: 1px solid rgba(255,165,0,0.35);
	border-radius: 8px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	padding: clamp(6px, 1vh, 10px) clamp(8px, 1.5vw, 12px);
	background: linear-gradient(180deg, #4a2b00 0%, #2a1600 100%);
	box-shadow:
		0 8px 20px rgba(0,0,0,0.40),
		0 0 12px rgba(255,165,0,0.15);
	opacity: 0;
	transform: scale(0.98);
	pointer-events: none;
	z-index: 9999;
	transform-origin: top left;
	white-space: normal;
	overflow-wrap: anywhere;
	max-width: clamp(180px, 22vw, 300px);
	font-size: clamp(11px, 1.1vw, 13px);
}
#p2ktooltip .tip-title{
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.3px;
	margin: 0 0 3px 0;
}
#p2ktooltip .tip-body{
	font-size: 0.9em;
	line-height: 1.4;
	opacity: 0.9;
}
#p2ktooltip .tip-cta{
	margin-top: 5px;
	font-size: 0.82em;
	opacity: 0.7;
	border-top: 1px solid rgba(255,255,255,0.08);
	padding-top: 4px;
}
#p2ktooltip.visible
{
	opacity: 1;
	transform: scale(1);
	pointer-events: auto;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
#p2ktooltip.hiding
{
	opacity: 0;
	transform: scale(0.98);
	transition: transform 0.12s ease, opacity 0.12s ease;
}
/* Fallback voor legacy h1 in tooltip markup */
#p2ktooltip h1
{
	font-size: 1em;
	margin: 0 0 3px 0;
	padding: 0;
	color: var(--color-tip-text);
	letter-spacing: 0.3px;
	font-weight: 700;
}
@media (max-width: 900px) {
  #p2ktooltip {
    font-size: 12px;
    max-width: min(240px, calc(100vw - 24px));
    padding: 7px 10px;
  }
}
@media (max-width: 430px) {
  #p2ktooltip {
    font-size: 13px;
    max-width: min(240px, calc(100vw - 20px));
    padding: 7px 10px;
  }
}

.brandbase, .googlemaps
{
	border-top: 1px dotted black;
	border-left: 1px dotted black;
	padding-left: 3px;
	color: deepskyblue;
	font-size: 10px;
	text-shadow: 1px 1px 2px gray;
	float: right;
}

/* Inline hint styles for unknown values in message/capcode text. */
.TIP
{
	text-decoration: underline dotted;
	text-decoration-color: rgba(150, 150, 150, 0.35);
	text-underline-offset: 2px;
	margin-left: 0;
	cursor: pointer; /* help werkt niet in Safari — pointer is vereist voor mouseover op span */
}
.TIP#BB
{
	color: deepskyblue;
}
.TIP a{
	text-decoration: none;
	color: inherit;
}
.TIP a:hover{
	text-decoration: none;
}
.TIP:hover
{
	background-color: var(--color-tip-bg);
	color: var(--color-tip-text);
	border-radius: 2px;
	text-decoration-color: rgba(150, 150, 150, 0.6);
}
.TIPI
{
	font-size: 11px;
	font-style: oblique;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	margin-left: 0;
}
.pol
{
	color: #00F;
	background-color: #999;
	font-weight: 600;
}
.amb
{
	color: #000;
	background-color: #ff6;
	font-weight: normal;
}
.gri
{
	color: #000;
	background-color: #D9B3FF;
	font-weight: normal;
}
.med
{
	color: #000;
	background-color: #FC6;
	font-weight: normal;
}
.ond
{
	color: #000;
	background-color: #CF9;
	font-weight: normal;
}
.reg
{
	color: #000;
	background-color: #9CF;
	font-weight: normal;
}
.brw
{
	color: #000;
	background-color: var(--color-brw);
	font-weight: normal;
}

/* Region/filter buttons in the footer selector table. */
.pol, .amb, .med, .ond, .reg, .brw, .gri
{
	box-shadow: inset 0 0 5px #888;
	white-space: nowrap;
	padding: 0 3px;
}

#footer td.pol,
#footer td.amb,
#footer td.med,
#footer td.ond,
#footer td.reg,
#footer td.brw,
#footer td.gri,
#footer td.stt,
#footer td.social-links{
  border-radius: 8px;
  box-shadow: var(--footer-btn-shadow);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  touch-action: manipulation; /* elimineert 300ms tap delay */
}
/* Hover-lift alleen voor muis — niet voor touch (iOS sticky-hover bug) */
@media (hover: hover) {
#footer td.pol:hover,
#footer td.amb:hover,
#footer td.med:hover,
#footer td.ond:hover,
#footer td.reg:hover,
#footer td.brw:hover,
#footer td.gri:hover,
#footer td.stt:hover,
#footer td.social-links:hover{
  transform: translateY(-1px);
  box-shadow: var(--footer-btn-shadow-hover);
}
}
#footer td.pol:active,
#footer td.amb:active,
#footer td.med:active,
#footer td.ond:active,
#footer td.reg:active,
#footer td.brw:active,
#footer td.gri:active,
#footer td.stt:active,
#footer td.social-links:active{
  transform: translateY(0);
  box-shadow: var(--footer-btn-shadow);
}
#footer td.pol:focus-within,
#footer td.amb:focus-within,
#footer td.med:focus-within,
#footer td.ond:focus-within,
#footer td.reg:focus-within,
#footer td.brw:focus-within,
#footer td.gri:focus-within,
#footer td.stt:focus-within,
#footer td.social-links:focus-within{
  outline: 2px solid var(--footer-btn-outline);
  outline-offset: 2px;
}
#footer td.pol a:focus-visible,
#footer td.amb a:focus-visible,
#footer td.med a:focus-visible,
#footer td.ond a:focus-visible,
#footer td.reg a:focus-visible,
#footer td.brw a:focus-visible,
#footer td.gri a:focus-visible,
#footer td.stt a:focus-visible,
#footer td.social-links a:focus-visible{
  outline: 2px solid var(--footer-btn-outline);
  outline-offset: 2px;
  border-radius: 6px;
}

.stt
{
	color: #000;
	background-color: #fff;
	padding: 0 3px 0 3px;
	white-space: nowrap;
}

/* Footer container; JS toggles .hide for auto-collapse on desktop. */
#footer
{
	position: fixed;
	overflow: hidden;         /* hide overflowing content while collapsing */
	bottom: 0;
	left: 0;
	width: 100%;
	max-height: 200px;         /* notice banner + regioknoppen passen beide */
	height: auto;             /* let content determine height when expanded */
	font-size: 12px !important; /* immuun voor body font-size scaling via zoom-knop */
	background-color: var(--color-panel-bg);
	text-align: center;
	font-size: 12px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
	opacity: 1;               /* initially visible */
	pointer-events: auto;     /* enable pointer events initially */
	border-top: 1px solid var(--color-border-strong);

	transition: opacity 0.6s ease, max-height 0.9s ease;
}

/* Footer notice (banner onderin, i.p.v. in meldingenlijst) */
#footerNotice{
	display:flex;
	justify-content:center;
	align-items:center;
	padding: 0;  /* geen ruimte als leeg — pill zet eigen padding */
}
#footerNotice:not(:empty){
	padding: 6px 10px 2px 10px;
}
.footer-notice-pill{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	padding: 7px 14px;
	border-radius: 10px;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.3;
	border: 1px solid rgba(255,255,255,0.1);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 2px 12px rgba(0,0,0,0.18);
	max-width: min(1100px, calc(100vw - 24px));
	white-space: normal;
	overflow-wrap: anywhere;
	color: rgba(255,255,255,0.75);
}
.footer-notice-pill a{ color: rgba(100,180,255,0.9); text-decoration: underline; }
.footer-notice-pill .fni{ font-size: 14px; line-height: 1; opacity: .8; }
.footer-notice-pill.info{ background: rgba(20,20,30,0.75); }
.footer-notice-pill.warning{ background: rgba(120,70,0,0.75); border-color: rgba(245,158,11,0.4); }
.footer-notice-pill.success{ background: rgba(0,60,20,0.75); border-color: rgba(34,197,94,0.4); }
.footer-notice-pill.danger{ background: rgba(80,0,0,0.75); border-color: rgba(239,68,68,0.4); }
.footer-notice-pill-close{
  background: none; border: none; cursor: pointer; flex-shrink: 0;
  font-size: 18px; line-height: 1; padding: 0 0 0 10px;
  color: var(--color-text); opacity: .5;
}
.footer-notice-pill-close:hover{ opacity: 1; }

#footer.hide{
	opacity: 0;
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;     /* disable interaction while hidden */
	
}

/* Main render target for merged polling results. */
#result
{
	margin-top: 2px;
	font-size: 14px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
	margin-bottom: 25px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-soft);
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
/* Extra fallback voor eventuele .melding buiten tabelcontext */
.melding{
  margin-bottom: 4px;
}
/* Uniform baseline padding for all result cells */
#result td{
  padding: 2px 5px;
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Meldingen compacter: minder verticale ruimte tussen kaarten */
#result table{
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 2px;
}
#result tr.message-row,
#result tr.melding{
  transition: transform .12s ease;
}
#result tr.message-row:hover,
#result tr.melding:hover{
  transform: none;
}
#result tr.message-row td,
#result tr.melding td{
  background: linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-card-bg-2) 100%);
  border-top: 1px solid var(--color-card-border);
  border-bottom: 1px solid var(--color-card-border);
  padding: 4px 6px;
  box-shadow: var(--color-card-shadow);
}
#result tr.message-row td:first-child,
#result tr.melding td:first-child{
  border-left: 1px solid var(--color-card-border);
  border-radius: 8px 0 0 8px;
  font-size: 14px;
}
#result tr.message-row td:last-child,
#result tr.melding td:last-child{
  border-right: 1px solid var(--color-card-border);
  border-radius: 0 8px 8px 0;
  font-size: 15px;
  font-weight: 600;
}
/* Type labels consistent (A1/A2/ALPHA etc) */
#result tr.message-row td.type,
#result tr.melding td.type{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
}
#result tr.message-row td.type span,
#result tr.message-row td.type b,
#result tr.message-row td.type strong,
#result tr.melding td.type span,
#result tr.melding td.type b,
#result tr.melding td.type strong{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
}
#result tr.message-row:hover td,
#result tr.melding:hover td{
  background: linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-card-bg-hover-2) 100%);
}
#result tr.divider-row td{
  background: transparent;
  border: 0;
  padding: 0;
}
/* Dividers compacter en subtiel */
#result hr{
  border: 0;
  border-top: 1px solid var(--color-divider);
  margin: 1px 0;
}
/* Mobile-only meta row (tijd + type boven bericht): verborgen op desktop */
tr.mobile-meta { display: none; }
#audio
{
	margin-top: -8px;
	margin-left: 0%;
	position: absolute;
}
#userimg{ display:flex; align-items:center; }
#userimg img{ height: 16px; width:auto; display:block; }

#usercount
{
	text-align: left;
	margin-top: -4px;
	right: 55px;
	padding-left: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-strong);
	position: absolute;
}
#colorbrw
{
	margin-top: -7px;
	right: 30px;
	position: absolute;
}
#collapseimg
{
	position: fixed;
	bottom: 0px;
	right: 0px;
}

/* Topbar branding element; optional hidden state is toggled by JS. */
.p2kflex_logo
{
	position: fixed;
	top: 6px;
	right: 50px;
	transition: transform 0.9s ease, opacity 0.9s ease; /* Adding transition for scaling and opacity */
}
.p2kflex_logo#hidden
{
    transform: scale(0); /* Scale down to 0 */
    opacity: 0; /* Fades out */
}

/* Subtiele hover animatie */
.p2kflex_logo img:hover {
    transform: scale(1.05);
}

#telegram_logo{
  position: static;
  margin: 0;
}
#telegram_logo a{ display:flex; align-items:center; }
#telegram_logo img{ height: 28px; width: auto; display:block; }

#feestdagen
{
	position: fixed;
	top: 44px;
	right: 5px;
}
#copyright
{
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 9px;
	color: var(--color-text-muted);
	text-align: center;
	margin-bottom: 70px;
}
#phptime
{
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 9px;
	color: var(--color-text-muted);
	text-align: center;
	margin-bottom: 85px;
}
#servererror
{
	height: 28px;
	margin-top: 3px;
	left: 88%;
	width: 10%;
	visibility: hidden;
	background: #f00;
	position: fixed;
}
#errorimg
{
	float: left;
	margin-top: 2px;
}
#errormsg
{
	float: left;
	margin-left: 10px;
	margin-top: 4px;
	font-weight: 600;
	color: var(--color-text-strong);
}
#sysmessage
{
	position: fixed;
	bottom: 80px;
	left: 10%;
	width: 80%;
	height: 18px;
	color: var(--color-sysmessage-text);
	background: var(--color-sysmessage-bg);
	visibility: hidden;
	text-align: center;
	font-weight: 600;
	padding: 9px;
}
.found_capcode
{
	color: #ffd400;
}

/* Collapsible helper rows and inline location links in result list. */
#airborne, #airborne a:link
{
	color: gold;
}

.collapsible
{
	background-color: var(--color-surface-2);
	cursor: pointer;
}
.active, .collapsible:hover
{
	background-color: var(--color-surface);
}
.collapsible_content
{
	display: none;
	overflow: hidden;
}

.extra_location
{
	font-size: 9px;
	text-align: center;
	font-weight: 600;
}

/* Clock widget in fixed topbar; supports shrink/hidden transitions. */
.clock
{
	/*font-size: 1.4rem;*/
        font-size: 16px;  /* was 18px */
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 600;
	color: var(--color-topbar-muted);
	text-align: center;
	line-height: 1;
	position: fixed;
	top: 15px;
	left: 12px;
	transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
	display: block;
	opacity: 1;
}
.clock.shrink
{
	transform: scale(0);
}
.clock#hidden
{
	display: none; /* or visibility: hidden; */
	transition: transform 0.9s ease, opacity 0.9s ease; /* Adding transition for scaling and opacity */
	opacity: 0; /* Fades out */
}

h1
{
	color: var(--color-text-strong);
}

/* Polling progress indicator at top edge; updated each refresh cycle. */
.progress-bar
{
	position: fixed;
	top: 0; /* Align to the top of the page */
	left: 0; /* Align to the left */
	height: 3px; /* Height of the progress bar */
	width: 100%; /* Start fully filled */
	background-color: var(--color-progress-bg); /* Start color */
	transition: width 0.1s linear, background-color 0.1s linear; /* Smooth transition for both width and color */
	z-index: 9999; /* Ensure it’s on top */
}

.new-messages span
{
	padding: 1px 8px;
	white-space: nowrap;
}

/* Legacy popup notification block (kept for compatibility). */
.notification
{
	position: fixed;
	left: 30%; /* Horizontally */
	top: 25%; /* Center vertically */
	transform: translate(-50%, -50%); /* Offset the width and height to truly center */
	background-color: #c81e1e; /* Red background color */
	color: #fff; /* White text color */
	font-size: 20px; /* Set your desired font size */
	font-weight: 600;
	border: 3px solid #ffd400; /* Yellow border */
	padding: 15px;
	border-radius: 5px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	text-align: center; /* Center text inside the notification */
}

#notification
{
	transform: scale(0); /* Start at scale 0 */
	transition: transform 0.6s ease, opacity 0.6s ease; /* Transition for scaling and fading out */
}
.hidden
{
	display: none; /* Hide the element; ensure to set this in CSS */
}
.visible
{
	display: block; /* Show the element when it's visible */
	opacity: 1; /* Ensure the opacity is full when visible */
}

/* Active/previous region selection styles controlled by JS. */

.highlight
{
	box-shadow: var(--color-highlight) 0px 0px 0px 2px;
	background: gold;
}
.highlighted
{
	font-weight: 600;
}

/* Style for the Zoomed In notification */
#zoomNotification
{
	position: fixed;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--color-zoom-bg);
	color: var(--color-zoom-text);
	padding: 12px 24px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	display: none; /* Hidden by default, managed via opacity */
	z-index: 9999;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	opacity: 0;
	transition: opacity 1s ease; /* Smooth transition for opacity */
}

/* When visible, show with opacity 1 */
#zoomNotification.show
{
	display: block;
	opacity: 1;
}

/* When hiding, fade out */
#zoomNotification.hide
{
	opacity: 0;
}


/* "Nieuwe meldingen" separator */
.new-messages{
  display: flex;
  align-items: center;
  margin: 4px 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.newmsg-line{
  flex-grow: 1;
  border-top: 1px solid var(--color-row-sep);
  margin: 0 6px;
}

/* Mobile tweak: center logo area by resetting horizontal offset variable. */
@media (max-width: 700px){
  :root{ --logo-offset: 0px; }
}
#result a{
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-row-sep);
  text-underline-offset: 2px;
}
#result a:hover{
  color: var(--color-link-visited);
  text-decoration-color: var(--color-link-visited);
}

/* ============================================================
   Responsive: iPad (≤ 900px)
   Kolom 1: 140px  |  Kolom 2: 100px  |  Kolom 3: auto
   ============================================================ */
@media (max-width: 900px) {
  .datetime { width: 140px; min-width: 140px; }
  .type     { width: 100px; min-width: 90px; }
  .capcode  { width: 100px; min-width: 90px; }
}

/* ============================================================
   Responsive: iPhone (≤ 430px)
   Layout-strategie: tabel → block-layout zodat berichttekst
   en labels de volledige schermbreedte kunnen benutten.
   Tijd + GROUP in een aparte kleine kopregel (mobile-meta).
   ============================================================ */
@media (max-width: 430px) {

  /* ── 1. Breedte-fix: viewport volledig benutten op mobiel ── */
  body { width: 100% !important; overflow-x: hidden; padding-bottom: 140px !important; }
  html { overflow-x: hidden; }

  /* ── 2. Container: volledige schermbreedte ── */
  #result {
    width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
    border-left: none !important; border-right: none !important;
    box-sizing: border-box;
  }

  /* ── 3. Tabelstructuur → block-layout (geeft kolom 3 volledige breedte) ── */
  #result table,
  #result tbody,
  #result tr,
  #result td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    min-width: 0 !important;
  }

  /* ── 4. Mobile meta row: zichtbaar, kleine grijze kopregel ── */
  tr.mobile-meta                { display: block !important; }
  tr.mobile-meta td.meta-mobile {
    font-size: 10px !important;
    opacity: .65;
    padding: 5px 8px 1px 8px !important;
    background: transparent !important;
    border: none !important; border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 500; letter-spacing: .1px;
  }

  /* ── 5. Verberg originele tijdcel en type-cel in berichtrijen ── */
  #result tr.message-row td.datetime,
  #result tr.melding td.datetime { display: none !important; }
  #result tr.message-row td.type,
  #result tr.melding td.type     { display: none !important; }

  /* ── 6. Verberg MSGinc (leeg) en capcode-nummers; label pakt volle breedte ── */
  #result tr td.MSGinc  { display: none !important; }
  #result tr td.capcode { display: none !important; }

  /* ── 7. Reset card-stijl (desktop-card werkt niet in block-layout) ── */
  #result tr.message-row td,
  #result tr.melding td {
    background: none !important;
    border: none !important; border-radius: 0 !important;
    box-shadow: none !important;
    padding: 1px 8px !important;
  }

  /* ── 8. Berichttekst-cel: volledige card-styling, maximale breedte ── */
  #result tr.message-row td:last-child,
  #result tr.melding td:last-child {
    background: linear-gradient(180deg, var(--color-card-bg) 0%, var(--color-card-bg-2) 100%) !important;
    border: 1px solid var(--color-card-border) !important;
    border-radius: 6px !important;
    box-shadow: var(--color-card-shadow) !important;
    padding: 5px 8px !important;
    font-size: 15px !important; font-weight: 500;
    word-break: break-word; overflow-wrap: break-word;
  }

  /* ── 8b. Capcode-label cellen (niet-message rijen) ── */
  #result tr:not(.message-row):not(.melding):not(.divider-row):not(.mobile-meta) td:last-child {
    font-size: 12px !important; font-weight: 500; opacity: 0.95;
  }

  /* ── 9. Divider rijen: transparant, geen padding ── */
  #result tr.divider-row td {
    background: transparent !important; border: none !important;
    box-shadow: none !important; padding: 2px 0 !important;
  }

  /* ── 10. Footer: scrollbaar voor alle regioknoppen, safe-area notch ── */
  #footer {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
}