/* ================= GLOBAL ================= */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #0b1419;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

/* ================= APP CONTAINER ================= */

#appContainer {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh; /* mobiele viewport fix */
}

/* ================= HEADER ================= */

#appHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #0f1d24;
    color: white;
    box-sizing: border-box;
    flex-shrink: 0;
    z-index: 10;
}

.appTitle{
    font-weight:bold;
    letter-spacing:1px;
    color:#ff3b3b;
    font-size:18px;
}

.appLevel{
    font-weight:bold;
    font-size:14px;
    text-align:right;
    min-width:220px;
}

/* ================= MAP ================= */

#mapContainer {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
    overflow: hidden;
}

#map {
    height: 100%;
    width: 100%;
}

/* ================= BOTTOM PANEL ================= */

#bottomPanel{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    display: flex;
    justify-content: space-around;
    align-items: center;

    padding: 10px;
    background: #0f1d24;
    color: white;

    z-index: 2000;

    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

/* ================= POPUPS ================= */

.leaflet-popup-content-wrapper{
    background:#111c24;
    border-left:4px solid #ff3b3b;
    border-radius:8px;
    color:#fff;
    box-shadow:0 0 20px rgba(0,0,0,0.5);
}

.leaflet-popup-tip{
    background:#111c24;
}

.leaflet-popup-content button{
    background:#ff3b3b;
    border:none;
    padding:6px 10px;
    border-radius:5px;
    color:#fff;
    font-weight:bold;
    cursor:pointer;
    transition:0.2s;
}

.leaflet-popup-content button:hover{
    background:#d22;
}

/* ================= DISPATCH ALERT ================= */

.dispatchAlert{
    position:absolute;
    top:70px;
    left:50%;
    transform:translateX(-50%);
    background:#111c24;
    border-left:5px solid red;
    padding:12px 20px;
    border-radius:8px;
    font-weight:bold;
    z-index:2500;
    box-shadow:0 0 15px rgba(255,0,0,0.6);
    animation:slideDown 0.3s ease;
}

@keyframes slideDown{
    from{transform:translate(-50%,-20px);opacity:0;}
    to{transform:translate(-50%,0);opacity:1;}
}

/* ================= LOGIN SCREEN ================= */

#loginScreen{
    height:100vh;
    height:100dvh;
	width:98%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#0b1117,#111c24);
}

/* Login Card */

.loginCard{
    width:320px;
    padding:30px;
    background:#111c24;
    border-radius:12px;
    border-left:6px solid #ff3b3b;
    box-shadow:0 0 25px rgba(255,0,0,0.3);
    text-align:center;
    animation:fadeIn 0.4s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:translateY(0);}
}

.loginTitle{
    font-size:20px;
    font-weight:bold;
    margin-bottom:20px;
    color:#ff3b3b;
    letter-spacing:1px;
}

.loginCard input{
    width:100%;
    padding:12px;
    margin-bottom:12px;
    background:#0b1117;
    border:1px solid #333;
    border-radius:6px;
    color:#fff;
    outline:none;
    transition:0.2s;
}

.loginCard input:focus{
    border-color:#ff3b3b;
    box-shadow:0 0 8px rgba(255,0,0,0.4);
}

.loginCard button{
    width:100%;
    padding:12px;
    background:#ff3b3b;
    border:none;
    border-radius:6px;
    font-weight:bold;
    color:#fff;
    cursor:pointer;
    transition:0.2s;
}

.loginCard button:hover{
    background:#d22;
    box-shadow:0 0 10px rgba(255,0,0,0.6);
}

/* ===== MOBILE FIX ===== */

@media (max-width: 600px) {

    #appHeader {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .appLevel {
        margin-top: 6px;
        min-width: unset;
    }

    #bottomPanel {
        font-size: 13px;
        padding: 8px;
    }

}
/* ===== Footer Logout ===== */

.footerLogout{
    background:transparent;
    border:1px solid #ff3b3b;
    color:#ff3b3b;
    padding:6px 10px;
    border-radius:6px;
    font-weight:bold;
    cursor:pointer;
    transition:0.2s;
}

.footerLogout:hover{
    background:#ff3b3b;
    color:#fff;
}

/* ===== HEADER CLEAN HUD ===== */

#appHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 16px;
    background:#0f1d24;
}

/* Right side container */

.hudRight{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    min-width:180px;
}

/* Top row (level + text) */

.hudTop{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:4px;
}

/* Level badge */

.levelBadge{
    background:#00ffc3;
    color:#001a1a;
    font-weight:bold;
    padding:4px 10px;
    border-radius:14px;
    font-size:12px;
    box-shadow:0 0 8px rgba(0,255,195,0.6);
}

/* XP numbers */

.xpText{
    font-size:12px;
    color:#ccc;
    min-width:70px;
    text-align:right;
}

/* XP bar */

.xpBarBg{
    width:180px;
    height:5px;
    background:#1c2a33;
    border-radius:3px;
    overflow:hidden;
}

.xpBarFill{
    height:5px;
    width:0%;
    background:linear-gradient(90deg,#00ffc3,#00c8ff);
    border-radius:3px;
    transition:width 0.3s ease;
}

.incident-icon{
    font-size:22px;
    text-align:center;
    line-height:28px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#111c24;
    box-shadow:0 0 8px rgba(0,0,0,0.6);
    display:flex;
    align-items:center;
    justify-content:center;
}

.incident-icon.fire{
    box-shadow:0 0 12px rgba(255,80,0,0.7);
}

.incident-icon.medical{
    box-shadow:0 0 12px rgba(0,255,200,0.7);
}

.incident-icon.police{
    box-shadow:0 0 12px rgba(0,120,255,0.7);
}

.incident-icon.tow{
    box-shadow:0 0 12px rgba(255,200,0,0.7);
}

#centerBtn{
    position:absolute;
    right:15px;
    bottom:90px;
    z-index:1000;

    width:45px;
    height:45px;
    border-radius:50%;

    border:none;
    background:#111c24;
    color:#00ffc3;
    font-size:20px;
    cursor:pointer;

    box-shadow:0 0 12px rgba(0,255,195,0.3);
    transition:0.2s;
}

#centerBtn:hover{
    background:#1b2b34;
    box-shadow:0 0 16px rgba(0,255,195,0.6);
}

#followBtn{
    position:absolute;
    right:15px;
    bottom:150px;
    z-index:1000;

    width:45px;
    height:45px;
    border-radius:50%;

    border:none;
    background:#111c24;
    color:#ffaa00;
    font-size:20px;
    cursor:pointer;

    box-shadow:0 0 12px rgba(255,170,0,0.3);
    transition:0.2s;
}

#followBtn.active{
    background:#ffaa00;
    color:#000;
    box-shadow:0 0 18px rgba(255,170,0,0.8);
}
.dispatch-popup{
    min-width:240px;
    font-size:13px;
}

.dispatch-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:6px;
}

.dispatch-title{
    font-weight:bold;
    font-size:15px;
}

.dispatch-priority{
    padding:3px 8px;
    border-radius:12px;
    font-weight:bold;
    font-size:11px;
    color:#000;
}

.dispatch-meta{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:4px;
    font-size:11px;
    opacity:0.9;
    margin-bottom:6px;
}

.dispatch-role{
    font-size:12px;
    margin-bottom:6px;
}

.dispatch-desc{
    font-size:12px;
    margin-bottom:8px;
    opacity:0.85;
}

.dispatch-progress{
    height:8px;
    background:#1a2a33;
    border-radius:6px;
    overflow:hidden;
    margin-bottom:3px;
}

.dispatch-progress-bar{
    height:100%;
    background:#00ffc3;
    transition:width 0.3s ease;
}

.dispatch-progress-text{
    font-size:10px;
    text-align:right;
    margin-bottom:6px;
}

.dispatch-actions{
    display:flex;
    gap:6px;
}

.dispatch-btn{
    flex:1;
    border:none;
    padding:6px;
    border-radius:6px;
    font-weight:bold;
    cursor:pointer;
    font-size:12px;
}

.dispatch-btn.nav{
    background:#1f3a4a;
    color:#00ffc3;
}

.dispatch-btn.start{
    background:#ff3b3b;
    color:#fff;
}

.dispatch-btn.busy{
    background:#555;
    color:#fff;
}

/* P1 flashing border */
.p1-alert{
    animation: p1flash 1.2s infinite;
    border-left:4px solid #ff2b2b;
}

@keyframes p1flash{
    0%{ box-shadow:0 0 0px rgba(255,0,0,0.4); }
    50%{ box-shadow:0 0 12px rgba(255,0,0,0.8); }
    100%{ box-shadow:0 0 0px rgba(255,0,0,0.4); }
}

/* discipline bar */
.discipline-bar{
    display:flex;
    gap:4px;
    margin-bottom:6px;
    flex-wrap:wrap;
}

.discipline-item{
    padding:3px 6px;
    border-radius:4px;
    font-size:10px;
    background:#1f3a4a;
    color:#888;
}

.discipline-item.active{
    background:#00ffc3;
    color:#000;
    font-weight:bold;
}

/* role badges */
.roles-active{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    margin-bottom:6px;
}

.role-badge{
    background:#ff3b3b;
    padding:3px 6px;
    border-radius:12px;
    font-size:10px;
    font-weight:bold;
}

/* XP preview */
.xp-preview{
    margin-top:6px;
    font-size:11px;
    font-weight:bold;
    color:#00ffc3;
}

.p1-flash{
    animation: flashBorder 1s infinite;
}

@keyframes flashBorder{
    0%{ box-shadow:0 0 6px #ff2b2b; }
    50%{ box-shadow:0 0 18px #ff0000; }
    100%{ box-shadow:0 0 6px #ff2b2b; }
}

/* Popup styling */

.incident-popup{
    min-width:260px;
    font-size:13px;
}

.incident-header{
    font-weight:bold;
    display:flex;
    justify-content:space-between;
    margin-bottom:6px;
}

.progress-container{
    height:8px;
    background:#222;
    border-radius:6px;
    margin-top:6px;
}

.progress-bar{
    height:8px;
    background:#00ffc3;
    border-radius:6px;
    transition:width 0.3s;
}

.role-badge{
    background:#111;
    padding:3px 6px;
    border-radius:6px;
    margin-right:4px;
    font-size:11px;
}

.discipline-bar{
    display:flex;
    gap:4px;
    margin-top:6px;
}

.discipline-slot{
    font-size:11px;
    padding:3px 6px;
    border-radius:5px;
    background:#333;
    opacity:0.4;
}

.discipline-slot.active{
    background:#00ffc3;
    color:#000;
    opacity:1;
}

.xp-preview{
    margin-top:4px;
    font-weight:bold;
    color:#00ffc3;
}

.incident-popup{
    min-width:240px;
    color:white;
    font-size:13px;
}

.popup-header{
    font-weight:bold;
    font-size:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.priority-badge{
    background:#ff2b2b;
    padding:2px 6px;
    border-radius:6px;
    font-size:11px;
}

.popup-distance{
    opacity:0.8;
    margin:4px 0;
}

.popup-description{
    font-size:12px;
    opacity:0.85;
    margin-bottom:6px;
}

.multi-role-container{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-bottom:6px;
}

.role-chip{
    padding:3px 6px;
    border-radius:6px;
    background:#222;
    font-size:11px;
    opacity:0.6;
}

.role-chip.active{
    background:#00ffc3;
    color:black;
    opacity:1;
}

.progress-container{
    height:6px;
    background:#222;
    border-radius:4px;
    margin-top:4px;
}

.progress-bar{
    height:6px;
    background:#00ffc3;
    border-radius:4px;
    transition:width 0.3s;
}

.progress-text{
    font-size:11px;
    margin-top:2px;
}

.popup-buttons{
    margin-top:8px;
    display:flex;
    gap:6px;
}

.xp-preview{
    margin-top:4px;
    font-size:12px;
    color:#00ffc3;
}

/* 🔴 Flashing border bij P1 */
.p1-flash{
    animation:flashBorder 1s infinite;
    border:2px solid #ff2b2b;
    border-radius:8px;
    padding:6px;
}

@keyframes flashBorder{
    0%{ box-shadow:0 0 4px #ff2b2b; }
    50%{ box-shadow:0 0 14px #ff2b2b; }
    100%{ box-shadow:0 0 4px #ff2b2b; }
}

/* Multi wrapper */
.incident-wrapper{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Multi container */
.multi-container{
    position:relative;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    background:#111c24;
    border-radius:50%;
    box-shadow:0 0 8px rgba(0,0,0,0.6);
}

/* Multi badge */
.multi-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    width:16px;
    height:16px;
    border-radius:50%;
    background:#ffaa00;
    color:#000;
    font-size:12px;
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 6px rgba(255,170,0,0.8);
}

/* Multi glow */
.incident-multi .multi-container{
    box-shadow:0 0 12px rgba(255,170,0,0.8);
}

.multi-incident{
    border:2px solid #00ffc3;
    box-shadow:0 0 14px rgba(0,255,195,0.8);
}
.icon-wrapper{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    border-radius:50%;
    background:#111c24;
    box-shadow:0 0 10px rgba(0,0,0,0.6);
}

.incident-icon{
    width:34px !important;
    height:34px !important;
}

.multi-dot{
    position:absolute;
    bottom:-2px;
    right:-2px;
    width:10px;
    height:10px;
    background:#00ffc3;
    border-radius:50%;
    border:2px solid #111;
}

/* =========================================================
   🚨 RESPONDER GO – HULPVERLENINGS THEMA
   Alleen kleuren & uitstraling aangepast
   ========================================================= */

/* ====== GLOBAL DARK COMMAND CENTER ====== */

html, body {
    background: radial-gradient(circle at 20% 20%, #0f1c24 0%, #0a1218 60%);
    color: #e6eef3;
}

/* Subtiele noise / satcom look */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.015),
        rgba(255,255,255,0.015) 1px,
        transparent 1px,
        transparent 3px
    );
    pointer-events: none;
    z-index: 1;
}

/* ====== HEADER ====== */

#appHeader {
    background: linear-gradient(90deg, #0f1c24, #142733);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.appTitle {
    color: #ffffff;
    letter-spacing: 2px;
}

/* ====== LEVEL BADGE ====== */

.levelBadge {
    background: #1f3a4a;
    color: #00c8ff;
    box-shadow: 0 0 10px rgba(0,200,255,0.4);
}

/* ====== XP BAR ====== */

.xpBarBg {
    background: #0d1a22;
}

.xpBarFill {
    background: linear-gradient(90deg,#00c8ff,#00ffc3);
}

/* =========================================================
   🚑 DISCIPLINE KLEUREN
   ========================================================= */

/* Brandweer */
.incident-icon.fire,
.discipline-item.fire,
.role-chip.fire {
    background: #b3261e !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(179,38,30,0.7);
}

/* Ambulance */
.incident-icon.medical,
.discipline-item.medical,
.role-chip.medical {
    background: #0a7f4f !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(10,127,79,0.7);
}

/* Politie */
.incident-icon.police,
.discipline-item.police,
.role-chip.police {
    background: #0b3d91 !important;
    color: white !important;
    box-shadow: 0 0 10px rgba(11,61,145,0.7);
}

/* Berging */
.incident-icon.tow,
.discipline-item.tow,
.role-chip.tow {
    background: #b8860b !important;
    color: black !important;
    box-shadow: 0 0 10px rgba(184,134,11,0.8);
}

/* =========================================================
   🗺 MAP BUTTONS
   ========================================================= */

#centerBtn,
#followBtn {
    background: #162733;
    border: 1px solid rgba(255,255,255,0.05);
    color: #00c8ff;
}

#followBtn.active {
    background: #00c8ff;
    color: #001018;
}

/* =========================================================
   📦 POPUP STYLING
   ========================================================= */

.leaflet-popup-content-wrapper {
    background: linear-gradient(180deg,#13232e,#0f1b24);
    border-left: 4px solid #00c8ff;
    box-shadow: 0 0 25px rgba(0,0,0,0.7);
}

.leaflet-popup-tip {
    background: #13232e;
}

.dispatch-title {
    color: #ffffff;
}

/* PRIORITY BADGES */

.dispatch-priority {
    color: #fff;
}

.dispatch-priority[style*="ff2b2b"] {
    background: #b3261e !important;
}

.dispatch-priority[style*="ffaa00"] {
    background: #b8860b !important;
}

.dispatch-priority[style*="00ffc3"] {
    background: #006d6d !important;
}

/* =========================================================
   🔘 BUTTONS
   ========================================================= */

.dispatch-btn.nav {
    background: #1c3442;
    color: #00c8ff;
}

.dispatch-btn.nav:hover {
    background: #244a5e;
}

.dispatch-btn.start {
    background: #0a7f4f;
    color: white;
}

.dispatch-btn.start:hover {
    background: #0c9960;
}

.dispatch-btn.busy {
    background: #444;
}

/* =========================================================
   📊 PROGRESS BAR
   ========================================================= */

.dispatch-progress {
    background: #0d1a22;
}

.dispatch-progress-bar {
    background: linear-gradient(90deg,#00c8ff,#00ffc3);
}

/* =========================================================
   🏆 XP PREVIEW
   ========================================================= */

.xp-preview {
    color: #00ffc3;
}

/* =========================================================
   🚨 P1 ALERT
   ========================================================= */

.p1-alert {
    border-left: 4px solid #b3261e;
    animation: p1flashNew 1.5s infinite;
}

@keyframes p1flashNew {
    0%   { box-shadow: 0 0 0px rgba(179,38,30,0.3); }
    50%  { box-shadow: 0 0 18px rgba(179,38,30,0.8); }
    100% { box-shadow: 0 0 0px rgba(179,38,30,0.3); }
}

/* =========================================================
   🔵 MULTI INCIDENT
   ========================================================= */

.multi-badge {
    background: #006d6d;
    color: #fff;
}

.incident-multi .multi-container {
    box-shadow: 0 0 14px rgba(0,200,255,0.8);
}

/* =========================================================
   🧾 LOGIN SCREEN
   ========================================================= */

#loginScreen {
    background: radial-gradient(circle at center, #10202a 0%, #0a1218 80%);
}

.loginCard {
    background: #142733;
    border-left: 5px solid #00c8ff;
    box-shadow: 0 0 30px rgba(0,200,255,0.3);
}

.loginTitle {
    color: #00c8ff;
}

.loginCard input {
    background: #0c1a22;
    border: 1px solid #1f3a4a;
}

.loginCard input:focus {
    border-color: #00c8ff;
    box-shadow: 0 0 10px rgba(0,200,255,0.4);
}

.loginCard button {
    background: #00c8ff;
    color: #001018;
}

.loginCard button:hover {
    background: #00a6d6;
}

/* ================= LOGIN / REGISTER TRANSITIONS ================= */

#loginSection,
#registerSection{
    transition: all 0.35s ease;
}

#loginSection.hidden{
    opacity:0;
    transform:translateX(-20px);
    pointer-events:none;
}

#registerSection.hidden{
    opacity:0;
    transform:translateX(20px);
    pointer-events:none;
}

#loginSection,
#registerSection{
    opacity:1;
    transform:translateX(0);
}

/* ================= CUSTOM SELECT (PROFESSIONAL) ================= */

.loginCard select{
    width:100%;
    padding:12px 40px 12px 12px;
    margin-bottom:12px;

    background:#0e1a22;
    border:1px solid #1e3a46;
    border-radius:6px;

    color:#e6faff;
    font-size:14px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    background-image: url("data:image/svg+xml,%3Csvg fill='%2300bfff' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px;

    transition:all 0.25s ease;
}

.loginCard select:hover{
    border-color:#00bfff;
}

.loginCard select:focus{
    border-color:#00bfff;
    box-shadow:0 0 8px rgba(0,191,255,0.4);
    outline:none;
}

/* ================= ROLE COLOR SYSTEM ================= */

:root{
    --fire:#ff6b00;
    --medical:#00e0a4;
    --police:#1ea7ff;
    --tow:#ffc400;
}

/* Role option hover glow */
.loginCard select option[value="fire"]{
    background:#1a0f05;
}

.loginCard select option[value="medical"]{
    background:#051a14;
}

.loginCard select option[value="police"]{
    background:#05111a;
}

.loginCard select option[value="tow"]{
    background:#1a1505;
}

/* =========================================================
   🚨 CHAT PANEL – CLEAN & STABLE
   ========================================================= */

#chatPanel{
    position: fixed;
    background: #0f1d24;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 25px rgba(0,0,0,0.6);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 1500;
}

/* ================= HEADER ================= */

#chatHeader{
    padding: 10px 14px;
    background: #142733;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ================= TABS ================= */

.chatTabs{
    display:flex;
}

.chatTabs button{
    flex:1;
    padding:6px;
    border:none;
    background:#0f1d24;
    color:#aaa;
    cursor:pointer;
    font-size:12px;
}

.chatTabs button.active{
    background:#1f3a4a;
    color:#00c8ff;
}

/* ================= MESSAGES ================= */

#chatMessages{
    flex:1;
    overflow-y:auto;
    padding:10px;
    font-size:13px;
    font-family: monospace;
}

.chatMessage{
    margin-bottom:6px;
}

.chatTime{
    color:#777;
    font-size:11px;
}

.chatUser{
    color:#00c8ff;
    font-weight:bold;
}

.chatSystem{
    color:#ffaa00;
}

/* ================= INPUT ================= */

#chatInputWrap{
    display:flex;
    padding:8px;
    gap:6px;
    border-top:1px solid rgba(255,255,255,0.05);
}

#chatInput{
    flex:1;
    padding:6px;
    border-radius:6px;
    border:none;
    background:#0c1a22;
    color:white;
}

#chatSend{
    padding:6px 12px;
    border:none;
    border-radius:6px;
    background:#00c8ff;
    color:#001018;
    font-weight:bold;
    cursor:pointer;
}

/* =========================================================
   🖥 DESKTOP
   ========================================================= */

@media (min-width: 769px){

    #chatPanel{
        right:20px;
        top:80px;
        width:340px;
        height:420px;

        bottom:auto;

        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

}

/* =========================================================
   📱 MOBILE
   ========================================================= */

@media (max-width: 768px){

    #chatPanel{
        left: 0;
        right: 0;
        bottom: 38px; /* exact boven bottomPanel */
        width: 100%;

        background:#0f1d24;
        border-radius: 16px 16px 0 0;

        transition: height 0.3s ease;
        overflow:hidden;
    }

    /* ===== Compacte balk ===== */
    #chatPanel.mobile-min{
        height: 48px; /* alleen header zichtbaar */
    }

    /* ===== Volledig open ===== */
    #chatPanel.mobile-full{
        top: 60px;        /* net onder header */
        bottom: 38px;     /* boven bottomPanel */
        height: auto;
    }

}

/* ===============================
   🔔 CHAT NOTIFICATION PULSE
   =============================== */

#chatHeader.notify {
    animation: chatPulse 1.6s infinite;
}

@keyframes chatPulse {
    0%   { box-shadow: 0 0 0 rgba(0,200,255,0); }
    50%  { box-shadow: 0 0 14px rgba(0,200,255,0.6); }
    100% { box-shadow: 0 0 0 rgba(0,200,255,0); }
}

/* ========================================
   🚨 DISTRICT SYSTEM ALERT (TOP POPUP)
   ======================================== */

.systemTopAlert{
    position: fixed;
    top: 70px; /* onder header */
    left: 50%;
    transform: translateX(-50%);

    background: #142733;
    border-left: 5px solid #00c8ff;

    padding: 12px 18px;
    border-radius: 8px;

    font-weight: bold;
    font-size: 14px;
    color: #ffffff;

    box-shadow: 0 0 18px rgba(0,0,0,0.6);
    z-index: 4000;

    animation: slideDown 0.3s ease;
}

@keyframes slideDown{
    from { opacity:0; transform: translate(-50%, -15px); }
    to   { opacity:1; transform: translate(-50%, 0); }
}

#chatHeader{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

#chatHeader .chatRight{
    display:flex;
    align-items:center;
    gap:6px;
}

#gmOverlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#0b141a;
    z-index:5000;
    display:flex;
    flex-direction:column;
}

/* ================= GM OVERLAY ================= */

#gmOverlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#0b141a;
    z-index:5000;
    display:flex;
    flex-direction:column;
}

#gmHeader{
    background:#111e26;
    padding:14px;
    font-weight:bold;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:18px;
}

#gmTabs{
    display:flex;
    background:#142733;
}

#gmTabs button{
    flex:1;
    padding:12px;
    border:none;
    background:#142733;
    color:#ccc;
    cursor:pointer;
    font-weight:500;
}

#gmTabs button.active{
    background:#1f3a4a;
    color:#00c8ff;
}

#gmContent{
    flex:1;
    overflow:auto;
    padding:20px;
}
#mapWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* =========================================================
   👤 PLAYER MARKER (PRO)
   ========================================================= */

/* =========================================================
   👤 PLAYER MARKER
   ========================================================= */

.player-marker{
    text-align:center;
    font-weight:600;
    z-index:9999;
}

.player-wrapper{
    position:relative;
    width:80px;
    height:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.player-dot{
    width:18px;
    height:18px;
    background:#00c8ff;
    border-radius:50%;
    box-shadow:
        0 0 0 6px rgba(0,200,255,0.25),
        0 0 16px rgba(0,200,255,0.9);
    z-index:2;
}

.player-pulse{
    position:absolute;
    width:80px;
    height:80px;
    border-radius:50%;
    border:2px solid rgba(0,200,255,0.6);
    animation:playerPulse 1.8s infinite ease-out;
    z-index:1;
}

@keyframes playerPulse{
    0%{
        transform:scale(0.5);
        opacity:1;
    }
    70%{
        transform:scale(1.6);
        opacity:0;
    }
    100%{
        opacity:0;
    }
}

.player-role{
    font-size:20px;
}

.player-name{
    font-size:13px;
    color:white;
}

.player-level{
    font-size:11px;
    color:#00ffc3;
}
#mapWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#map {
    width: 100%;
    height: 100%;
}

.dailyPopup{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.7);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
}

.dailyCard{
background:#0e1a22;
padding:30px;
border-radius:10px;
text-align:center;
color:white;
width:320px;
}

.dailyGrid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:8px;
margin:20px 0;
}

.dailyDay{
padding:10px;
border-radius:6px;
background:#132a36;
}

.dailyDay.active{
background:#00c8ff;
color:black;
font-weight:bold;
}

.player-rank{
position:absolute;
top:-8px;
right:-8px;
font-size:14px;
background:#0e1a22;
border-radius:50%;
padding:2px;
box-shadow:0 0 6px rgba(0,0,0,0.6);
}

.player-prestige{
position:absolute;
bottom:-8px;
left:-8px;
font-size:12px;
background:#0e1a22;
border-radius:6px;
padding:1px 3px;
box-shadow:0 0 6px rgba(0,0,0,0.6);
}

.dailyPopup{
display:flex;
animation:dailyPop 0.35s ease;
}

@keyframes dailyPop{
0%{transform:scale(.7);opacity:0}
100%{transform:scale(1);opacity:1}
}

.unit-marker{
display:flex;
flex-direction:column;
align-items:center;
gap:2px;

background:#0b1a24;
border:1px solid #00c8ff;
border-radius:8px;

padding:4px 6px;

color:#fff;
font-size:11px;

box-shadow:0 0 8px rgba(0,200,255,0.4);

white-space:nowrap;
}

.unit-top{
display:flex;
align-items:center;
gap:6px;
font-weight:600;
}

.unit-icon{
font-size:16px;
}

.unit-name{
font-size:11px;
}

.unit-middle{
display:flex;
gap:6px;
font-size:10px;
color:#9edcff;
}

.unit-level{
font-weight:600;
}

.unit-rank{
font-size:11px;
}

.unit-prestige{
font-size:10px;
}

.unit-bottom{
position:relative;
margin-top:2px;
}

.unit-marker{
display:flex;
flex-direction:column;
align-items:center;

background:#0b1a24;
border:2px solid #4aa3ff;

border-radius:8px;

padding:4px 6px;

color:#fff;

font-size:11px;

box-shadow:0 0 8px rgba(0,0,0,0.5);

white-space:nowrap;
}

.unit-top{
display:flex;
align-items:center;
gap:6px;
font-weight:600;
}

.unit-icon{
font-size:16px;
}

.unit-name{
font-size:11px;
}

.unit-middle{
display:flex;
gap:6px;
font-size:10px;
color:#9edcff;
}

.unit-level{
font-weight:600;
}

.unit-bottom{
position:relative;
margin-top:2px;
}

.player-dot{
width:10px;
height:10px;
border-radius:50%;
position:absolute;
top:2px;
left:2px;
}

.player-pulse{
width:14px;
height:14px;
border-radius:50%;
opacity:0.5;
animation:pulse 2s infinite;
}

@keyframes pulse{

0%{
transform:scale(0.6);
opacity:0.7;
}

70%{
transform:scale(2);
opacity:0;
}

100%{
opacity:0;
}

}

/* ================= PLAYER PIN ================= */

.player-pin{
    width:16px;
    height:16px;
    border-radius:50%;
    border:3px solid white;
    box-shadow:0 0 8px rgba(0,0,0,0.4);
}

/* dienst kleuren */

.player-pin.police{
    background:#2a7fff;
}

.player-pin.fire{
    background:#ff3b3b;
}

.player-pin.medical{
    background:#ffd84a;
}

.player-pin.tow{
    background:#ff9b3d;
}

.vipBtn{

background:linear-gradient(45deg,#9b59ff,#00c8ff);
border:none;
padding:6px 12px;
border-radius:6px;
color:white;
font-weight:bold;
cursor:pointer;
box-shadow:0 0 10px rgba(155,89,255,0.5);
transition:0.2s;

}

.vipBtn:hover{

transform:scale(1.05);
box-shadow:0 0 15px rgba(155,89,255,0.8);

}

.betaBadge{

    background:#ff9800;

    color:#000;

    font-size:11px;

    font-weight:bold;

    padding:3px 6px;

    border-radius:4px;

    margin-left:8px;

    vertical-align:middle;

}