/* --- Algemeen --- */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f4f4f4; color: #333; }
h1, h2 { color: #0056b3; border-bottom: 2px solid #dee2e6; padding-bottom: 5px; margin-top: 30px; margin-bottom: 20px; }
h1:first-of-type, h2:first-of-type { margin-top: 0; }
a { color: #007bff; text-decoration: none; } a:hover { text-decoration: underline; }
pre { white-space: pre-wrap; word-wrap: break-word; background-color: #f8f9fa; padding: 10px 15px; border: 1px solid #e9ecef; border-radius: 4px; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 0.95em; margin-top: 5px; margin-bottom: 15px; }

/* --- Knoppen & Links --- */
.button-link, .actions button, .actions a { display: inline-block; text-decoration: none; padding: 6px 12px; margin-right: 5px; margin-bottom: 5px; border-radius: 4px; cursor: pointer; font-size: 0.9em; border: none; vertical-align: middle; text-align: center; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.button-link { background-color: #007bff; color: white; } .button-link:hover { background-color: #0056b3; }
.button-link.cancel-btn, .cancel-btn { background-color: #6c757d; color: white; } .button-link.cancel-btn:hover, .cancel-btn:hover { background-color: #5a6268; }
.button-link.edit-btn, .edit-btn { background-color: #ffc107; color: #212529; font-weight: bold; } .button-link.edit-btn:hover, .edit-btn:hover { background-color: #e0a800; }
.actions .details-btn { background-color: #17a2b8; color: white; } .actions .details-btn:hover { background-color: #138496; }
.actions .complete-btn { background-color: #28a745; color: white; } .actions .complete-btn:hover { background-color: #218838; }
.actions .delete-btn { background-color: #dc3545; color: white; } .actions .delete-btn:hover { background-color: #c82333; }
.actions .resolve-btn { background-color: #ffc107; color: #212529; } .actions .resolve-btn:hover { background-color: #e0a800; }

/* Modal edit knop specifieke styling */
#modal-edit-link, a#modal-edit-link.button-link.edit-btn {
    color: #212529 !important;
    font-weight: bold !important;
    text-decoration: none !important;
    background-color: #ffc107;
}
#modal-edit-link:hover, a#modal-edit-link.button-link.edit-btn:hover {
    background-color: #e0a800;
    text-decoration: none !important;
}

/* --- Standaard Formulieren --- */
form { background-color: #fff; padding: 25px; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-bottom: 30px; }
form div:not(.form-grid-container):not(.form-grid-item):not(.time-container) { margin-bottom: 15px; }
form label { display: block; margin-bottom: 6px; font-weight: 600; color: #495057; }
form input[type="text"], form input[type="tel"], form input[type="datetime-local"], form select, form textarea, form input[type="file"] { width: 100%; max-width: 500px; padding: 10px; border: 1px solid #ced4da; border-radius: 4px; font-size: 1em; box-sizing: border-box; }
form textarea { min-height: 100px; resize: vertical; }
form input[type="checkbox"] { width: auto; margin-right: 5px; vertical-align: middle; }
form label input[type="checkbox"] { display: inline-block; margin-left: 5px; font-weight: normal; }
form button[type="submit"] { background-color: #28a745; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1em; }
form button[type="submit"]:hover { background-color: #218838; }
form small { color: #6c757d; display: block; margin-top: 10px; margin-bottom: 10px; }
input[type="datetime-local"] { padding: 9px; }

/* --- Formulier Grid Layout --- */
.form-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px 25px;
    align-items: start;
    margin-bottom: 20px;
    width: 100%;
}
.form-grid-item {
    margin-bottom: 0;
    min-width: 0;
}
.form-grid-item.full-width {
    grid-column: 1 / -1;
}
.form-grid-item.span-2 {
    grid-column: span 2;
}
.form-grid-item input[type="text"],
.form-grid-item input[type="tel"],
.form-grid-item input[type="datetime-local"],
.form-grid-item select,
.form-grid-item textarea {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}
.form-grid-item#urgent_div_container {
    align-self: end;
}
.form-grid-item #urgent_div label {
    display: flex;
    align-items: center;
    padding-top: 5px;
    margin-bottom: 0;
}
.form-grid-item #urgent_div input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
}
.form-grid-item input[type="file"] {
    padding: 5px;
    width: 100%;
}
.form-grid-item p.file-info {
    margin-top: 5px;
    font-size: 0.9em;
    color: #555;
}
.form-grid-item p.file-info label {
    display: inline-block;
    margin-left: 15px;
    font-weight: normal;
}

/* Tijdvelden boven elkaar */
.time-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.time-container div {
    margin-bottom: 0;
}

/* --- Tabellen --- */
.table-container { max-height: 60vh; overflow-y: auto; position: relative; border: 1px solid #dee2e6; margin-bottom: 20px; background-color: #fff; }
.table-container table { width: 100%; border-collapse: collapse; margin-bottom: 0; font-size: 0.95em; }
.table-container th, .table-container td { border: 1px solid #dee2e6; padding: 10px 12px; text-align: left; vertical-align: top; }
.table-container thead th { background-color: #e9ecef; font-weight: 600; color: #495057; white-space: nowrap; position: -webkit-sticky; position: sticky; top: 0; z-index: 10; }
.table-container tbody tr:nth-child(even) { background-color: #f8f9fa; } .table-container tbody tr:hover { background-color: #e2e6ea; }
td.actions { white-space: nowrap; }

/* --- Modal --- */
.modal { display: none; position: fixed; z-index: 1050; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7); padding-top: 50px; }
.modal-content { background-color: #fefefe; margin: auto; padding: 25px 30px; border: 1px solid #888; width: 80%; max-width: 750px; border-radius: 5px; position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.close-button { color: #555; position: absolute; top: 15px; right: 20px; font-size: 32px; font-weight: bold; line-height: 1; cursor: pointer; }
.close-button:hover, .close-button:focus { color: black; text-decoration: none; }
.modal-content h3 { margin-top: 0; color: #0056b3; border-bottom: 1px solid #ccc; padding-bottom: 15px; margin-bottom: 20px; }
.modal-content p { margin-bottom: 12px; line-height: 1.7; } .modal-content strong { display: inline-block; min-width: 140px; color: #495057; margin-right: 5px; }
.modal-content a { color: #007bff; } .modal-content a:hover { text-decoration: underline; }
.modal-notes { white-space: pre-wrap; word-wrap: break-word; background-color: #f8f9fa; padding: 10px 15px; border: 1px solid #e9ecef; border-radius: 4px; max-height: 200px; overflow-y: auto; font-family: Consolas, Monaco, monospace; font-size: 0.95em; margin-top: 5px; margin-bottom: 15px; }

/* --- Flash Messages --- */
.flash-message { padding: 15px 20px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; font-size: 1em; }
.flash-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } .flash-error { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .flash-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .flash-warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; }

/* --- Idle Blur Overlay --- */
body.blurred > *:not(#blur-overlay) { filter: blur(5px); pointer-events: none; user-select: none; transition: filter 0.3s ease-out; }
#blur-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 1060; cursor: pointer; justify-content: center; align-items: center; }
#blur-overlay .overlay-content { display: none; /* Verberg de tekst container */ }
body.blurred #blur-overlay { display: flex; }

/* --- Responsive Aanpassingen --- */
@media (max-width: 1000px) { 
    .form-grid-container { 
        grid-template-columns: 1fr 1fr; 
    } 
}
@media (max-width: 768px) { 
    .form-grid-container { 
        grid-template-columns: 1fr; 
        gap: 15px; 
    } 
    .form-grid-item.span-2 { 
        grid-column: auto; 
    }
    .form-grid-item.full-width { 
        grid-column: auto; 
    } 
    .form-grid-item#urgent_div_container { 
        align-self: start; 
    } 
    body { padding: 10px; } 
    h1, h2 { font-size: 1.4em; } 
    .table-container th, .table-container td { padding: 8px 10px; font-size: 0.9em; } 
    .actions button, .actions a, .button-link { font-size: 0.85em; padding: 5px 8px; } 
    .modal-content { width: 95%; padding: 20px; } 
    form input[type="text"], form input[type="tel"], form input[type="datetime-local"], form select, form textarea { max-width: 100%; } 
}
@media (max-width: 600px) { .table-container table, .table-container thead, .table-container tbody, .table-container th, .table-container td, .table-container tr { display: block; } .table-container thead tr { position: absolute; top: -9999px; left: -9999px; } .table-container tr { border: 1px solid #ccc; margin-bottom: 10px; background-color: #fff !important; } .table-container td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 45%; min-height: 30px; text-align: right; white-space: normal; display: flex; align-items: center; justify-content: flex-end; } .table-container td:before { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); width: 40%; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; content: attr(data-label); font-weight: bold; text-align: left; font-size: 0.9em; color: #495057; } .table-container td.actions { padding-left: 10px; text-align: left; justify-content: flex-start; flex-wrap: wrap; } .table-container td.actions:before { content: ""; display: none; } .table-container td.actions button, .table-container td.actions a, .table-container td.actions form { display: inline-block; margin-bottom: 5px; width: auto; } .button-link { display: block; width: 100%; box-sizing: border-box; margin: 10px 0; text-align: center; } }