/* style.css */
body { font-family: 'Gill Sans', sans-serif; margin: 0; padding: 10px; text-align: center; background-color: #f8f9fa; min-height: 100vh; position: relative; box-sizing: border-box; }

.container { 
    max-width: 950px; 
    margin: 0 auto; 
    background: white; 
    padding: 20px; 
    border-radius: 10px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); 
    margin-bottom: 60px;
}

.nav-bar { display: flex; justify-content: space-between; align-items: center; background: #343a40; color: white; padding: 10px 20px; border-radius: 8px; margin-bottom: 20px; }
.nav-bar a { color: #ffc107; text-decoration: none; font-weight: bold; }
.btn { padding: 8px 15px; background: var(--thema-kleur, orange); border: 2px solid black; border-radius: 6px; cursor: pointer; font-weight: bold; }
.btn-green { background: #28a745; color: white; }
.btn-red { background: #dc3545; color: white; }
.btn-blue { background: #007bff; color: white; }

.announcement-banner { background: #fff3cd; border: 2px solid #ffeeba; color: #856404; padding: 10px; border-radius: 8px; margin-bottom: 15px; text-align: left; }
.announcement-banner h4 { margin: 0 0 5px 0; display: flex; align-items: center; gap: 5px; }
.announcement-banner ul { margin: 0; padding-left: 20px; font-weight: bold; font-size: 16px; }

.login-form { max-width: 300px; margin: 50px auto; padding: 20px; border: 2px solid black; border-radius: 8px; background: white; }
.login-form input { width: 90%; padding: 8px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; }

.clock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
.clock-card { border: 3px solid black; background: var(--card-color, orange); padding: 15px; border-radius: 8px; font-weight: bold; text-decoration: none; color: black; display: block;}
.clock-card:hover { transform: scale(1.02); }

.top-header-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 5px 0 10px 0; padding: 0 5px; box-sizing: border-box; }
.header-left { width: 35%; text-align: left; display: flex; flex-direction: column; gap: 4px; }
.header-right { width: 35%; text-align: right; }
.header-right img { width: 140px; height: auto; }

#time { font-size: var(--klok-grootte); font-weight: bold; line-height: 0.85; margin: 10px 0; }
#date { font-size: 28px; font-weight: bold; width: 30%; text-align: center; flex-grow: 1; }

.table-wrapper { width: 100%; overflow: visible; }
table { width: 100%; border-collapse: separate; border-spacing: 4px; margin-top: 15px; table-layout: fixed; }
th, td { border: 3px solid black; background-color: var(--thema-kleur, orange); border-radius: 8px; font-size: var(--tabel-tekst); font-weight: bold; padding: 6px 10px; line-height: 1.0; overflow: hidden; text-overflow: ellipsis; }

.mode-select { font-size: inherit; font-weight: bold; background: transparent; border: none; appearance: none; text-align: center; font-family: inherit; width: 100%; pointer-events: none;}

@keyframes knipper {
    0%, 100% { background-color: var(--thema-kleur, orange); color: black; }
    50% { background-color: #dc3545; color: white; }
}
.knipper-rij td { animation: knipper 2s ease-in-out infinite !important; }

.watermark { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    opacity: 0.4; 
    font-size: 18px; 
    font-weight: bold; 
    background: rgba(0,0,0,0.05);
    padding: 6px 15px;
    border-radius: 25px;
    z-index: 9999; 
    text-decoration: none;
    color: black;
    display: block;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.watermark:hover { opacity: 0.9; transform: scale(1.05); background: rgba(0,0,0,0.1); }

/* --- 🖥️ FULLSCREEN --- */
:fullscreen { background-color: white !important; padding: 0 !important; margin: 0 !important; overflow: hidden; }
:fullscreen body { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; height: 100vh; padding: 1vh; overflow: hidden !important; }

:-webkit-full-screen .container { max-width: 98vw !important; width: 98vw !important; height: 96vh; box-shadow: none !important; margin: 0 auto !important; padding: 1vh 0 !important; display: flex; flex-direction: column; }
:-ms-fullscreen .container { max-width: 98vw !important; width: 98vw !important; height: 96vh; box-shadow: none !important; margin: 0 auto !important; padding: 1vh 0 !important; display: flex; flex-direction: column; }
:fullscreen .container { max-width: 98vw !important; width: 98vw !important; height: 96vh; box-shadow: none !important; margin: 0 auto !important; padding: 1vh 0 !important; display: flex; flex-direction: column; }

:fullscreen .announcement-banner { display: none !important; }
:fullscreen .nav-bar, :fullscreen .btn, :fullscreen .admin-controls, :fullscreen .edit-action, :fullscreen .size-controls-inline { display: none !important; }

:fullscreen .top-header-wrapper { margin: 0.5vh 0; padding: 0 2vw; }
:fullscreen #time { font-size: var(--klok-fullscreen); margin: 0; line-height: 0.85; }
:fullscreen #date { font-size: var(--date-fullscreen); }
:fullscreen .header-right img { width: 140px; }
:fullscreen #vakNaam { font-size: 5.5vh !important; }
:fullscreen .mode-select { font-size: 3.8vh !important; }

/* 
   =========================================================================
   📺 TABEL CONTAINER HOOGTE IN FULLSCREEN
   =========================================================================
   Oorspronkelijke waarde: max-height: 52vh;
   Nieuwe aangepaste waarde: max-height: 88vh; (geeft meer verticale ruimte)
   
   UITLEG & TERUGDRAAIEN:
   - Verander '88vh' terug naar '52vh' als je het originele formaat wilt herstellen.
   - Verschijnt er nog steeds een schuifbalk? Verhoog naar 90vh of 92vh.
   - Valt de onderkant van de tabel van het scherm? Verlaag naar 75vh of 80vh.
   ------------------------------------------------------------------------- 
*/
:fullscreen .table-wrapper { 
    flex-grow: 1; 
    overflow-y: auto; 
    width: 100%; 
    max-height: 105vh !important; /* <--- OUDE WAARDE WAS: 52vh */
    padding-right: 5px; 
    margin-bottom: 0px !important;
}

:fullscreen table { border-spacing: 6px; margin-top: 5px; }
:fullscreen td, :fullscreen th { font-size: var(--tabel-fullscreen); padding: 1vh 1vw; border-radius: 12px; border-width: 4px; }

:fullscreen .watermark { bottom: 25px; right: 25px; font-size: 20px; }