/* Algemene Verbeteringen */
body {
    transition: background-color 0.3s ease;
    padding-bottom: 3rem;
    font-size: 1rem; /* Standaard font size */
}
.navbar { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); }
.container { max-width: 1140px; } /* Consistent */
.card { border: 1px solid var(--bs-border-color-translucent); transition: box-shadow 0.2s ease-in-out; }
.card:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); }
.login-card { max-width: 450px; margin: auto; }
.sticky-top { z-index: 1019; /* Net onder navbar */ }


/* --- Dashboard & Rooster (Bootstrap Kalender) --- */
.calendar {
    table-layout: fixed;
    border-collapse: collapse;
}
.calendar th, .calendar td {
    vertical-align: top;
    text-align: left;
    height: 110px; /* Iets meer hoogte */
    border: 1px solid var(--bs-border-color-translucent);
}
.calendar th { height: auto; }
.calendar .calendar-day {
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.calendar .calendar-day:hover {
     z-index: 10;
     transform: scale(1.03);
     box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15);
}
.calendar-day a.stretched-link { /* Link binnen de cel */
    height: 100%;
    width: 100%;
    min-height: 108px; /* Net iets minder dan cel hoogte */
    position: relative;
    display: flex;
    flex-direction: column; /* Dagnummer bovenaan, content onderaan */
    justify-content: space-between; /* Ruimte ertussen */
    padding: 0.5rem; /* Padding op de link zelf */
}
.calendar .day-number {
    /* position: absolute; top: 0.3rem; right: 0.5rem; */ /* Niet meer absoluut */
    align-self: flex-end; /* Rechtsboven in flexbox */
    font-size: 0.8em;
    line-height: 1;
}
.calendar .day-content {
     /* position: absolute; bottom: 0.3rem; left: 0.5rem; right: 0.5rem; */ /* Niet meer absoluut */
     align-self: flex-start; /* Linksonder in flexbox */
     font-size: 0.75em;
     line-height: 1.3;
     overflow: hidden; /* Voorkom dat content te groot wordt */
     /* white-space: nowrap; text-overflow: ellipsis; */ /* Knipt af, misschien niet gewenst */
     word-break: break-word;
}
.calendar .calendar-user-badge {
     display: inline-block;
     max-width: 100%;
     padding: 0.2em 0.4em;
     margin-bottom: 0.2em; /* Ruimte tussen badges */
     white-space: normal; /* Sta tekst wrap toe */
     text-align: left;
}
.calendar .calendar-user-badge .fa-fw {
    text-align: center;
}

.calendar-day-today {
    border: 3px solid var(--bs-primary) !important;
}
.calendar-day-today .day-number {
    font-weight: 900 !important;
    color: var(--bs-primary) !important;
}
.calendar-day-empty {
    background-color: var(--bs-tertiary-bg);
    height: 110px;
}

/* Stijl voor dagen met alleen schedule (border ipv achtergrond) */
.calendar-day[style*="border-left"] {
    background-color: #fff !important;
}
[data-bs-theme="dark"] .calendar-day[style*="border-left"] {
     background-color: var(--bs-body-bg) !important;
}
.calendar-day[style*="border-left"] a.stretched-link {
    border-left: 5px solid transparent; /* Maak ruimte voor de border die op de TD staat */
    margin-left: -5px; /* Compenseer margin */
    padding-left: calc(0.5rem + 5px); /* Pas padding aan */
}
.calendar-day[style*="border-left"] .day-number {
    color: var(--bs-body-color) !important;
}
.calendar-day[style*="border-left"] .badge {
     color: var(--bs-body-color) !important;
     background-color: rgba(0,0,0,0.05) !important;
     border: 1px solid rgba(0,0,0,0.1) !important;
}
[data-bs-theme="dark"] .calendar-day[style*="border-left"] .badge {
     color: var(--bs-body-color) !important;
     background-color: rgba(255,255,255,0.1) !important;
     border: 1px solid rgba(255,255,255,0.2) !important;
}


/* --- Dag Details Pagina --- */
.day-details-header { padding: 1rem 1.5rem; margin-bottom: 1.5rem; border-radius: var(--bs-border-radius); border-bottom: 5px solid var(--user-color, var(--bs-secondary)); background-color: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .day-details-header { background-color: var(--bs-secondary-bg); }
.day-details-header h2 { margin-bottom: 0.25rem; }
.day-details-header .text-muted { font-size: 0.9em; }
.detail-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bs-border-color-translucent); }
.detail-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.detail-item strong { display: block; margin-bottom: 0.3rem; font-size: 0.9em; color: var(--bs-secondary-color); }
.detail-item .content { font-size: 1.1em; }
.detail-item .badge { font-size: 0.9em; padding: 0.4em 0.6em; }
.detail-item .text-muted { font-style: italic; }

/* Stijl voor Formulier op Dag Details */
.form-label { font-weight: 500; }
.range-value { font-weight: bold; margin-left: 0.5rem; min-width: 30px; display: inline-block; text-align: right; }
.star-rating .fa-star { font-size: 1.2em; /* Iets grotere sterren */ }
.btn-group .btn { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.btn-group input[type="radio"] { position: absolute; clip: rect(0,0,0,0); pointer-events: none; } /* Verberg beter */
.btn-group input[type="radio"]:checked + .btn { background-color: var(--bs-primary); border-color: var(--bs-primary); color: white; box-shadow: inset 0 1px 3px rgba(0,0,0,.2); }
[data-bs-theme="dark"] .btn-group input[type="radio"]:checked + .btn { background-color: var(--bs-primary); border-color: var(--bs-primary); color: black; }


/* --- Oma's Agenda --- */
.appointment-item { transition: background-color 0.3s ease, border-color 0.3s ease; border-left: 4px solid transparent; margin-bottom: 0.5rem !important; /* Override list-group marge */ padding-top: 0.75rem; padding-bottom: 0.75rem; }
.appointment-item:hover { border-left-color: var(--bs-secondary); }
.appointment-item.is-done { text-decoration: none; opacity: 0.65; background-color: var(--bs-secondary-bg); border-left-color: var(--bs-success); }
.appointment-item.is-done:hover { opacity: 0.8; }
.appointment-item .form-check-input { margin-top: 0.2em; margin-right: 0.5em;}
.appointment-item .form-check-label { display: inline-block; } /* Helpt bij uitlijning */
.appointment-item .btn-group { opacity: 0; transition: opacity 0.2s ease-in-out; }
.appointment-item:hover .btn-group, .appointment-item .btn-group:focus-within { opacity: 1; }


/* Responsive aanpassingen */
@media (max-width: 768px) {
    .calendar th, .calendar td { height: 85px; font-size: 0.75rem; } /* Kleinere cellen */
    .calendar .day-number { top: 0.1rem; right: 0.2rem; }
    .calendar .day-content { display: none; } /* Verberg badge op mobiel, te druk */
    .calendar-day a.stretched-link { padding: 0.3rem; min-height: 83px; } /* Minder padding */

    .appointment-item .btn-group { opacity: 1; width: 100%; margin-top: 0.5rem; justify-content: flex-end; }
    .appointment-item .btn-group .btn { flex-grow: 0; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
    .appointment-item .form-check-label { max-width: calc(100% - 2em); } /* Voorkom dat label over knoppen valt */
}