/* Dark Theme for User Interface */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 20px;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    text-align: center;
    transition: background-color 0.5s ease;
    box-sizing: border-box;
    background-color: #121212;
}
.logo { width: 200px; max-width: 80%; margin-bottom: 20px; filter: invert(1) drop-shadow(0 0 5px rgba(255,255,255,0.1)); }

/* Pincode Scherm */
.container { width: 100%; max-width: 320px; }
.page-title { font-size: 3.5em; color: #fff; text-shadow: 0 0 15px rgba(0, 123, 255, 0.6); margin-bottom: 5px; font-weight: bold; }
.instruction-text { font-size: 1.2em; color: #aaa; margin-top: 0; margin-bottom: 20px; }
.error { color: #ff4d4d; margin-top: 15px; font-weight: bold; }

.keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px; /* Belangrijke wijziging */
}
.keypad button { font-size: 1.8em; padding: 20px 0; background-color: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
.keypad button:active { background-color: #0056b3; }
.keypad .keypad-action { background-color: #495057; }
.keypad .keypad-action:active { background-color: #343a40; }

.pin-display {
    background-color: #1e1e1e;
    border: 1px solid #333;
    border-radius: 8px;
    height: 50px;
    line-height: 50px;
    font-size: 2em;
    letter-spacing: 0.5em;
    text-align: center;
    color: #eee;
}

/* Dashboard Scherm */
.dashboard {
    position: relative; /* Nodig voor de admin-gear positionering */
    width: 100%;
    max-width: 600px;
}
.admin-gear {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 2em;
    text-decoration: none;
    color: white;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}
.admin-gear:hover { opacity: 1; }
.logout-button { display: inline-block; margin-top: 10px; padding: 8px 16px; background-color: #dc3545; color: white; text-decoration: none; border-radius: 5px; transition: background-color 0.2s; }
.logout-button:hover { background-color: #c82333; }

.deuren-container { margin-top: 20px; display: flex; flex-direction: column; gap: 15px; }
.deur-card { background-color: #1e1e1e; border: 1px solid #333; border-radius: 8px; padding: 10px; display: flex; align-items: center; gap: 15px; text-align: left; }
.deur-img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.deur-info { flex-grow: 1; display: flex; flex-direction: column; }
.deur-naam { font-weight: bold; font-size: 1.2em; margin-bottom: 5px; color: #fff; }
.deur-status { padding: 5px 10px; border-radius: 5px; font-size: 0.9em; font-weight: bold; align-self: flex-start; }
.deur-status.online { background-color: #28a745; color: white; }
.deur-status.offline { background-color: #495057; color: #ccc; }
.open-knop { padding: 12px 22px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; transition: background-color 0.2s; font-size: 1em; }
.open-knop:hover { background-color: #0056b3; }
.open-knop[disabled] { background-color: #343a40; cursor: not-allowed; }

/* Succes Scherm */
.success-screen { width: 100%; max-width: 500px; }
.success-screen h1, .success-screen p { color: #fff; }
.success-screen img {
    width: 100%;
    max-width: 450px;
    margin-top: 20px;
    border-radius: 12px;
    border: 3px solid #444;
}