#reservation-form .form-label {
    font-weight: 600;
    color: #222;
}

/* date_requested / end_date are readonly text inputs driven by flatpickr
   (click-to-pick only, no typing a date in by hand) - keep them looking
   like a normal, usable field rather than Bootstrap's grayed-out readonly
   style. */
#date_requested,
#end_date {
    background-color: #fff;
    cursor: pointer;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    text-decoration: line-through;
}

#availability-note.has-conflict {
    color: #b42318;
    font-weight: 600;
}

#availability-note.is-clear {
    color: #1a7f37;
    font-weight: 600;
}

.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
}

#availability-calendar .fc-event {
    cursor: default;
    font-size: 0.8em;
}

#availability-calendar {
    background: #fff;
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Admin dashboard */
.admin-shell {
    background: #f4f6f8;
    min-height: 100vh;
}

.admin-shell .navbar-brand {
    font-weight: 700;
}

.status-badge {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    padding: 0.25em 0.6em;
    border-radius: 4px;
    font-weight: 700;
}

.status-pending   { background: #fff3cd; color: #7a5b00; }
.status-approved  { background: #d4edda; color: #155724; }
.status-denied    { background: #f8d7da; color: #721c24; }
.status-cancelled { background: #e2e3e5; color: #383d41; }

/* Confirmation dialogs (Deny reason, Message Requester) use the native
   <dialog> element rather than Bootstrap's JS modal component, so they
   work no matter which version of bootstrap.js the site's shared
   /bootstrap/js/bootstrap.min.js turns out to be (its data-bs-toggle
   modal wiring depends on that). We still reuse Bootstrap's
   modal-dialog/modal-content classes for the look. */
dialog.app-dialog {
    border: none;
    padding: 0;
    border-radius: 6px;
    background: transparent;
    max-width: 500px;
    width: 90%;
}

dialog.app-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

dialog.app-dialog .modal-dialog {
    margin: 0;
    max-width: none;
}

dialog.app-dialog .modal-content {
    border-radius: 6px;
}