@font-face {
font-family: CampingTycoon;
src: url('/fonts/THERainK.otf');
}

body {
background: #e5ffe5;
/* Voorkomt horizontaal scrollen */
overflow-x: hidden;
}

/* Helper-klasse om tabellen horizontaal scrollbaar te maken op mobiel */
.table-responsive-wrapper {
overflow-x: auto;
width: 100%;
border-radius: 10px;
margin-bottom: 50px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.warning{
text-align:center;
margin:14% auto;
padding:10px;
/* WIJZIGING: Responsive breedte */
width:90%;
max-width: 600px; 
background:rgb(95 118 101 / 78%);
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
-o-border-radius:6px
}

.warning.succes,
.warning.error {
color: #19301f; 
font-size: 2em; 
margin-top: 10px; 
margin-bottom: 0px; 
font-weight: bold; 
position: fixed; 
z-index: 10000;
/* WIJZIGING: Responsive centreren */
width: 90%;
max-width: 800px;
left: 50%;
transform: translateX(-50%);
margin-left: 0;
}

.noselect {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}

.center {
text-align: center;
}

.navbar {
background: #91ae98;
}

.logo {
font-family: CampingTycoon;
color: #18301e;
/* WIJZIGING: Fluid font size */
font-size: clamp(2.5rem, 10vw, 3.75rem);
padding-top: 10px;
padding-left: 20px;
}

a {
color: black;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.img-fluid {
padding: 50px;
}

.loginmodal {
background: url("/img/woodboard.png");
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: -10px;
right: 5vw;
width: 50vw;
aspect-ratio: 16/9;
height: auto;
}

.align-right{
text-align: right;
}

.icon {
width: 30px;
height: 30px;
margin-right: 10px;
}

.leftmargin {
margin-left: 10px;
}

li {
list-style-type: none;
padding: 0;
margin: 0;
line-height: 40px;
display: flex;
align-items:center;
}

/* --- RESPONSIVE MAP (TABLE-VERSIE) --- */
table.campingmap {
/* WIJZIGING: Schaalbaar gemaakt */
width: 100%;
max-width: 900px;
margin: 0 auto;
height: auto;
background: url('/img/grass.avif');
background-size: 15%;
border-radius: 15px;
border-collapse: collapse;
}

.campingmap td {
padding: 0px;
/* WIJZIGING: Cellen 10% breed en vierkant */
width: 10%; 
height: auto;
aspect-ratio: 1 / 1; 
border: 1px dashed grey;
text-align: center; 
vertical-align: middle;
position: relative;
}

.grid-item:not(.fixed):hover {
-webkit-box-shadow:inset 0px 0px 0px 5px orange;
-moz-box-shadow:inset 0px 0px 0px 5px orange;
box-shadow:inset 0px 0px 0px 5px orange;
cursor: pointer;
}

.grid-item.selected {
-webkit-box-shadow:inset 0px 0px 0px 5px #1e47cc;
-moz-box-shadow:inset 0px 0px 0px 5px #1e47cc;
box-shadow:inset 0px 0px 0px 5px #1e47cc;
cursor: pointer;
}

/*.schaduw, .compass {*/
/*    background-color: rgba(0,0,0,0.2);*/
/*}*/

table.campingmap td.free.selected {
border: 3px solid #0d6efd; /* Bootstrap 'primary' blauw */
box-shadow: 0 0 10px rgba(13, 110, 253, 0.7);
border-radius: 5px;
}

.grid-item.tree:hover {
-webkit-box-shadow:inset 0px 0px 0px 5px red;
-moz-box-shadow:inset 0px 0px 0px 5px red;
box-shadow:inset 0px 0px 0px 5px red;
cursor: pointer;
}

table.campingmap tr:last-child td:first-child {
/*border: 2px solid orange;*/
border-bottom-left-radius: 10px;
border: none;
}

table.campingmap tr:last-child td:last-child {
/*border: 2px solid green;*/
border-bottom-right-radius: 10px;
border: none;
}

table.campingmap tr:first-child td:first-child {
/*border: 2px solid orange;*/
border-top-left-radius: 10px;
border: none;
}

table.campingmap tr:first-child td:last-child {
/*border: 2px solid green;*/
border-top-right-radius: 10px;
border: none;
}

/* --- TABEL STIJLEN --- */
table.table {
border-collapse: collapse;
width: 100%;
color: #333;
font-family: Arial, sans-serif;
font-size: 14px;
text-align: left;
border-radius: 10px;
overflow: hidden;
/* WIJZIGING: Margin zit nu in de .table-responsive-wrapper */
margin: 0; 
} 

table.table th, .table tfoot td {
background-color: #91AE98;
color: #fff;
font-weight: bold;
padding: 10px;
text-transform: uppercase;
letter-spacing: 1px;
border-top: 1px solid #91AE98;
border-bottom: 1px solid #ccc;
text-align: center;
}

table.table th:first-child {
text-align: left;
}

table.table tr:nth-child(even) td {
background-color: #f2f2f2;
}

table.table tr:hover td {
background-color: #edfff6;
}

table.table td:first-child {
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ccc;
font-weight: bold;
text-align: left;
/* WIJZIGING: Relatieve line-height */
line-height: 1.4; 
vertical-align: middle;
}

table.table td {
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ccc;
text-align: center;
/* WIJZIGING: Relatieve line-height */
line-height: 1.4;
vertical-align: middle;
}

/* --- RESPONSIVE MAP (GRID-VERSIE) --- */
#campingmap {
position: relative;
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(7, 1fr);
gap: 0px;
background: url('/img/grass.avif');
background-size: 15%;
border-radius: 15px;
/* WIJZIGING: Schaalbaar gemaakt */
width: 100%;
max-width: 900px;
margin: 0 auto;
aspect-ratio: 10 / 7;
}

/* --- REGEN ANIMATIE --- */
.rain-overlay {
display: none; 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
pointer-events: none;
overflow: hidden;
}

.rain-overlay.is-raining {
display: block;
}

.rain-overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

background-image: 
/* Laag 1: Grote, snelle druppels (dichtbij) */
radial-gradient(circle at center, rgba(255,255,255,0.5) 2px, transparent 3px),
/* Laag 2: Medium druppels */
radial-gradient(circle at center, rgba(255,255,255,0.4) 1.5px, transparent 2.5px),
/* Laag 3: Kleine, langzame druppels (ver weg) */
radial-gradient(circle at center, rgba(255,255,255,0.2) 1px, transparent 2px);

background-size: 
80px 80px,  /* Laag 1: Grote druppels, ver uit elkaar */
50px 50px,  /* Laag 2: Medium druppels, dichter bij elkaar */
30px 30px;  /* Laag 3: Kleine druppels, dicht op elkaar */

background-repeat: repeat;

animation: 
rain-fall-drops-1 0.6s linear infinite,
rain-fall-drops-2 0.8s linear infinite,
rain-fall-drops-3 1.2s linear infinite;

opacity: 0.9;
}

@keyframes rain-fall-drops-1 {
from { background-position: 0 0; }
to { background-position: 0 400px; } /* Snel (0.6s) */
}
@keyframes rain-fall-drops-2 {
from { background-position: 25px 0; } /* Offset start X */
to { background-position: 25px 500px; } /* Medium (0.8s) */
}
@keyframes rain-fall-drops-3 {
from { background-position: 10px 0; } /* Offset start X */
to { background-position: 10px 300px; } /* Langzaam (1.2s) */
}

.rain-overlay.is-raining {
display: block;
}

/* --- GRID/MAP ITEMS --- */
.grid-item {
/* WIJZIGING: Gebruik flexbox voor centreren */
width: 100%;
height: 100%;
padding:0px;
border: 0.5px dashed grey;
text-align: center;
vertical-align: middle;
position: relative;
display: flex;
align-items: center;
justify-content: center;
line-height: normal; /* Reset oude line-height */
}


div.costs {
color: #ee1212;
display: inline-block;
padding: 0px;
}

.greyed {
filter: grayscale(100%);
opacity: 0.5;
cursor: default;
}

.grid-item {
	/* Zorg ervoor dat het grid-item een referentiepunt is */
	position: relative;
	
	/* Belangrijk: voorkom dat de blur-randen worden afgekapt */
	overflow: visible; 
}

.grid-item::before {
	/* Dit wordt onze SOLIDE schaduw-laag */
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	/* De kleur wordt nog steeds gevuld door JS */
	background-color: var(--shadow-color, transparent);
	
	/* HIER GEBEURT DE MAGIE:
	   We passen een masker toe dat we met JS aansturen. */
	mask-image: var(--shadow-mask);
	
	/* Zorgt dat de verschillende maskers (voor N, O, Z, W) 
	   correct worden gecombineerd. */
	mask-composite: intersect; 
	/* Firefox-compatibiliteit */
	-webkit-mask-composite: source-in; 
	mask-composite: source-in;


	z-index: 1; 

	/* We kunnen de kleur nog steeds laten faden */
	transition: background-color 0.5s ease;
}

.grid-item .mapplace {
	/* Zorg dat de afbeelding (tent, etc.) bóven de schaduw-laag staat */
	position: relative;
	z-index: 2;
}

.mapplace {
position: relative;
/* WIJZIGING: Betere vulling en schaling */
width: 80%;
height: 80%;
object-fit: contain;
}

.mapplaceoverlay {
position: absolute;
width: 50%;
height: 50%;
top: 25%;
left: 25%;
object-fit: contain;
}

.actionicons {
/* WIJZIGING: Schaalbaar gemaakt */
width: 80%;
height: 80%;
max-width: 70px;
max-height: 70px;
object-fit: contain;
}

.road {
width: 100%;
height: 100%;
}

.north {
transform: rotate(0);
}

.east {
transform: rotate(90deg);
}

.south {
transform: rotate(180deg);
}

.west {
transform: rotate(270deg);
}

table.campingmap .greyed {
background: rgba(0,0,0,0.5);
}

/* HIDE RADIO */
[type=radio] { 
position: absolute;
opacity: 0;
width: 0;
height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
cursor: pointer;
padding: 5px;
/* WIJZIGING: Iets kleiner, touch-friendly */
width: 44px;
height: 44px;
object-fit: contain;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
outline: 2px solid #f00;
}

.modal-dialog {
/* WIJZIGING: Standaard 90vw voor mobiel */
max-width: 90vw;
}

.placestatus {
/* WIJZIGING: Responsive positionering */
width: 35%;
height: 35%;
max-width: 35px;
max-height: 35px;
position: absolute;
z-index:10;
top: 5px;
right: 5px;
margin-bottom: 0;
margin-right: 0;
}

.footer {
position: fixed;
bottom: 0;
width: 100%;
/* WIJZIGING: Zorgt dat footer boven map-elementen blijft */
z-index: 100;
}

#playbirds {
border-radius: 6px;
padding: 5px 15px;
background-color: white;
border: 2px solid rgba(0,0,0,0.2);
}

.audioplay {
background-color: #35b055 !important;
color: white;
}

.sunscore {
width: 25px;
height: 25px;
margin-top: 10px;
margin-right: 10px;
position: absolute;
filter: grayscale(1);
}

/* --- PROGRESSIE CIRKEL (GRASMAAIEN) --- */
.progress-circle-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; 
z-index: 4;
}

.progress-circle-svg {
width: 70%; 
height: 70%;
overflow: hidden; 
}

.progress-circle-bg,
.progress-circle-fg {
fill: none;
stroke-width: 4; 
}

.progress-circle-bg {
stroke: rgba(255, 255, 255, 0.3); 
}

.progress-circle-fg {
stroke: #ffd347;
stroke-linecap: round;
stroke-dasharray: 100 100;
stroke-dashoffset: 0;

animation-name: progress-mow-countdown;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-duration: 36s; /* Fallback */
}

@keyframes progress-mow-countdown {
to {
stroke-dashoffset: 100; 
}
}

/* --- GRASMAAIER ANIMATIE --- */
@keyframes mow-flip {
0% { transform: scaleX(1); }
50% { transform: scaleX(1); }
75% { transform: scaleX(-1); } 
100% { transform: scaleX(-1); }
}

.mowing-mower {
position: absolute;
top: 10%;
left: 10%;
transform: translate(-50%, -50%); 
width: 80%; 
height: 80%;
object-fit: contain; 
}

.mowing-mower.is-mowing {
animation: mow-flip 5s infinite alternate ease-in-out; 
}

/* --- DAG/NACHT CYCLUS --- */
#sky-night {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, #000033, #191970);
opacity: 0;
z-index: 9990;
}

#celestial-track {
position: absolute;
bottom: 0; 
left: 50%;
width: 100vw; 
height: 100vw;
margin-left: -50vw; 
margin-bottom: -50vw; 
z-index: 9991;
}

#sun {
position: absolute;
top: 5%; 
left: 50%;
width: 100px;
height: 100px;
margin-left: -50px; 
background-color: #FFD700; 
border-radius: 50%;
box-shadow: 0 0 50px #FFD700;
}

#moon {
position: absolute;
bottom: 5%;
left: 50%;
width: 80px;
height: 80px;
margin-left: -40px; 
background-color: #E6E6FA; 
border-radius: 50%;
box-shadow: 0 0 30px #FFFFFF;
}

#next-day-button.disabled {
pointer-events: none;
opacity: 0.65;
}

.sky-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #87CEEB; 
z-index: 9998;
opacity: 0;
pointer-events: none;
overflow: hidden; 
transition: opacity 0.5s ease-in-out;
}

.sky-overlay.visible {
opacity: 1;
pointer-events: all;
}

#fast-forward-clock {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9992; 
color: white;
font-size: 3.5em;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
opacity: 0.9;
white-space: nowrap; 
}

#celestial-track.animated {
animation: rotate-sky linear infinite;
}

#sky-night.animated {
animation: fade-night linear infinite;
}

@keyframes rotate-sky {
from { transform: rotate(180deg); }
to { transform: rotate(540deg); }
}

@keyframes fade-night {
0% { opacity: 1; }  /* 00:00 */
20%  { opacity: 1; }  /* 04:48 */
30%  { opacity: 0; }  /* 07:12 */
50%  { opacity: 0; }  /* 12:00 */
70%  { opacity: 0; }  /* 16:48 */
80%  { opacity: 1; }  /* 19:12 */
100% { opacity: 1; }  /* 24:00 */
}

.sidebar-text{
    padding-right: 3px;
}

/* Styling voor de sidebar items */
.col-md-2 ul li {
    display: flex;       /* Gebruik flexbox voor uitlijning */
    align-items: center; /* Centreer items verticaal */
    margin-bottom: 5px;  /* Kleine ruimte tussen items */
}

.col-md-2 ul li .icon {
    margin-right: 8px; /* Ruimte tussen icoon en tekst/cijfers */
}

/* --- MEDIA QUERIES (RESPONSIVE AANPASSINGEN) --- */

@media (max-width: 767.98px) {
    #desktopNavbar { display: none; }
}
/* Verberg de mobiele navbar op grotere schermen */
@media (min-width: 768px) {
    #mobileNavbar { display: none; }
    body { padding-top: 0; } /* Verwijder padding op desktop */
}
/* Styling voor iconen in mobiel menu */
#mainNavbarMobile .nav-link img.icon {
     width: 20px;
     height: 20px;
     vertical-align: middle;
}

/* --- Styling voor Mobiele Navbar Stats --- */
#mobileNavbar .navbar-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Ruimte tussen stats items */
    font-size: 0.9rem; /* Iets kleiner lettertype */
    color: #333; /* Donkergrijze tekstkleur */
    margin-left: auto; /* Duwt stats naar rechts, voor de toggler */
    margin-right: 0.5rem; /* Ruimte voor de toggler */
}
#mobileNavbar .navbar-stats .stat-item {
    display: flex;
    align-items: center;
}
#mobileNavbar .navbar-stats .icon {
    width: 18px; /* Kleine iconen */
    height: 18px;
    margin-right: 4px; /* Ruimte na icoon */
}
#mobileNavbar .navbar-stats a { /* Zorg dat links de juiste kleur hebben */
     color: #333;
     text-decoration: none;
}
 /* Styling voor de custom desktop navbar items */
#desktopNavbar .nav-item-custom {
    display: flex;
    align-items: center; /* Lijn icoon en tekst verticaal uit */
    padding: 0.5rem 1rem; /* Ruimte rond items */
    white-space: nowrap; /* Voorkom dat tekst breekt */
}
#desktopNavbar .nav-item-custom a,
#desktopNavbar .nav-item-custom span { /* Zorg dat links en spans zich gedragen */
     display: flex;
     align-items: center;
     color: #333; /* Zet een standaard kleur */
     text-decoration: none;
}
 #desktopNavbar .nav-item-custom a:hover {
     text-decoration: underline;
 }
#desktopNavbar .nav-item-custom .icon {
    margin-right: 8px; /* Ruimte na icoon */
}
 /* Zorg dat de middelste div in de desktop navbar centreert */
 #desktopNavbar .center-nav-items {
     justify-content: center;
 }

/* Herstel modal-breedte voor desktop */
@media (min-width: 992px) {
.modal-dialog {
max-width: 70vw;
}
}

@media (max-width: 992px) {
.sidebar-text {
display: none; /* Verberg de tekst */
}

/* Optioneel: Iets minder ruimte rechts van het icoon als de tekst weg is */
.col-md-2 ul li .icon {
/* margin-right: 4px; */ /* Kan nodig zijn, afhankelijk van je layout */
}

/* Zorg dat de link nog steeds werkt als alleen het icoon over is */
.col-md-2 ul li a {
display: inline-flex; /* Zorgt dat de link de grootte van het icoon aanneemt */
align-items: center;
}
}
/* Voor schermen kleiner dan 768px (tablets en telefoons) */
@media (max-width: 768px) {
.logo {
padding-left: 10px;
}

.loginmodal {
width: 90vw;
right: auto;
left: 50%;
transform: translateX(-50%);
top: 5vh;
}

.warning.succes,
.warning.error {
font-size: 1.5em;
}

/* Verklein de tekst in tabellen */
table.table {
font-size: 12px;
}
table.table th,
table.table td {
padding: 6px;
line-height: 1.3;
}
}

/* Voor zeer kleine schermen */
@media (max-width: 480px) {
.logo {
text-align: center;
padding-left: 0;
}

[type=radio] + img {
width: 40px;
height: 40px;
padding: 2px;
}

#fast-forward-clock {
font-size: 2.5em;
}
}

/* Maak de popover breder */
.popover {
  max-width: 400px; /* Pas deze waarde aan naar wens (bv. 300px, 500px) */
}

.popover-body {
  font-size: 0.85rem;         /* Iets grotere tekst */
  line-height: 1.4;          /* Betere leesbaarheid */
}

/* Styling specifiek voor de iconen IN de popover body */
.popover-body img.icon {
    width: 18px; /* Maak ze iets kleiner dan in de popover zelf */
    height: 18px;
    margin-right: 4px; /* Kleine ruimte naast de tekst */
}

/* Styling specifiek voor mobiele apparaten (< 768px) */
@media (max-width: 767.98px) {
    /* Container voor de kaart */
    .camping-map-container {
        width: 100vw;      /* Volledige viewport breedte */
        height: calc(100vh - 60px); /* Volledige viewport hoogte minus hoogte navbar (pas 60px aan!) */
        overflow-x: auto;  /* Horizontale scroll mogelijk maken */
        overflow-y: hidden; /* Verticale scroll voorkomen (optioneel) */
        position: relative; /* Nodig voor absolute positionering van de kaart zelf */
        border: none !important; /* Verwijder eventuele randen */
    }

    /* De daadwerkelijke kaart (tabel of grid) BINNEN de container */
    #campingmap {
        /* Geef de kaart een vaste, brede grootte zodat scrollen nodig is */
        width: 150%; /* Bijvoorbeeld 150% van de container breedte */
        /* Of gebruik een vaste pixelwaarde als je dat liever hebt */
        /* width: 900px; */ /* Moet breder zijn dan het mobiele scherm */

        /* Zorg dat de hoogte goed schaalt met de breedte */
        height: auto; /* Behoud aspect ratio als je grid/tabel die heeft */
        /* Of als je een vaste hoogte nodig hebt */
        /* height: 100%; */ /* Vul de container hoogte */

        max-width: none; /* Override eventuele max-width van desktop */
        margin: 0; /* Verwijder eventuele centrering margins */
    }

     /* Zorg dat de body niet mee scrollt */
    body {
        overflow-x: hidden;
    }
}