/* Keep personal availability distinct from the planner's staff action buttons. */
.planner-availability-action {
    --availability-color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .625rem;
    max-width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: .625rem;
    background: #fff;
    color: #334155;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.planner-availability-action:hover {
    border-color: var(--availability-color);
    box-shadow: 0 2px 5px #0f172a12;
}
.planner-availability-action[data-availability-status="available"] { --availability-color: #15803d; }
.planner-availability-action[data-availability-status="if_needed"] { --availability-color: #b45309; }
.planner-availability-action[data-availability-status="unavailable"] { --availability-color: #b91c1c; }
.planner-availability-dot, .planner-availability-choice-dot {
    width: .5rem;
    height: .5rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--availability-color);
}
.planner-availability-copy { display: grid; gap: .125rem; font-size: .75rem; font-weight: 600; line-height: 1.35; }
.planner-availability-caption { font-size: .625rem; font-weight: 500; color: #64748b; }
.planner-availability-chevron { width: .875rem; height: .875rem; flex-shrink: 0; margin-left: auto; color: #94a3b8; }
#plannerAvailabilityName { font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.planner-availability-legend { margin-bottom: .625rem; font-size: .875rem; font-weight: 600; }
#plannerAvailabilityModal .availability-toggle { display: grid; gap: .625rem; padding: 0; background: none; }
#plannerAvailabilityModal .availability-btn {
    --availability-color: #15803d;
    display: flex;
    justify-content: flex-start;
    gap: .75rem;
    min-height: 3.25rem;
    padding: .875rem 1rem;
    border: 1px solid #cbd5e1;
    border-radius: .75rem;
    background: #fff;
    color: #334155;
    box-shadow: none;
    text-align: left;
}
#plannerAvailabilityModal .availability-btn-if-needed { --availability-color: #b45309; }
#plannerAvailabilityModal .availability-btn-unavailable { --availability-color: #b91c1c; }
#plannerAvailabilityModal .availability-btn:hover { border-color: var(--availability-color); background: #f8fafc; }
#plannerAvailabilityModal .availability-btn.is-selected {
    border-color: var(--availability-color);
    background: color-mix(in srgb, var(--availability-color) 8%, white);
    color: var(--availability-color);
    box-shadow: 0 0 0 1px var(--availability-color);
}
#plannerAvailabilityModal .planner-availability-check { width: 1rem; height: 1rem; margin-left: auto; visibility: hidden; }
#plannerAvailabilityModal .is-selected .planner-availability-check { visibility: visible; }
.planner-availability-action:focus-visible,
#plannerAvailabilityModal .availability-btn:has(input:focus-visible) { outline: 2px solid #2563eb; outline-offset: 3px; }
#plannerAvailabilityFields:disabled .availability-btn { opacity: .5; cursor: not-allowed; }
#plannerAvailabilityMessage:empty { display: none; }
.dark .planner-availability-action { background: #111827; color: #e2e8f0; border-color: #475569; }
.dark .planner-availability-caption { color: #94a3b8; }
.dark .planner-availability-action[data-availability-status="available"] { --availability-color: #4ade80; }
.dark .planner-availability-action[data-availability-status="if_needed"] { --availability-color: #fbbf24; }
.dark .planner-availability-action[data-availability-status="unavailable"] { --availability-color: #f87171; }
.dark #plannerAvailabilityModal .availability-btn { background: #111827; color: #cbd5e1; border-color: #475569; --availability-color: #4ade80; }
.dark #plannerAvailabilityModal .availability-btn-if-needed { --availability-color: #fbbf24; }
.dark #plannerAvailabilityModal .availability-btn-unavailable { --availability-color: #f87171; }
.dark #plannerAvailabilityModal .availability-btn:hover { border-color: var(--availability-color); background: #1e293b; }
.dark #plannerAvailabilityModal .availability-btn.is-selected { border-color: var(--availability-color); color: var(--availability-color); background: color-mix(in srgb, var(--availability-color) 10%, #111827); }