/* dashboard.css — additional overrides */
.dashboard-welcome { margin-bottom: 1.5rem; }

/* ===== Availability toggle (referee) ===== */
.availability-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 1.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    border-left: 4px solid #e5e7eb;
}

.availability-card.is-available { border-left-color: #16a34a; }
.availability-card.is-unavailable { border-left-color: #dc2626; }

.availability-info { display: flex; align-items: center; gap: 14px; min-width: 0; }

.availability-status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.is-available .availability-status-dot { background: #16a34a; box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.is-unavailable .availability-status-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.15); }

.availability-title { display: block; font-weight: 600; }
.availability-subtitle { display: block; font-size: .82rem; color: #6b7280; }

.switch { position: relative; display: inline-block; width: 52px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; inset: 0; background: #d1d5db; border-radius: 28px; transition: background .2s; }
.switch-slider::before { content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .switch-slider { background: #16a34a; }
.switch input:checked + .switch-slider::before { transform: translateX(24px); }
.switch input:disabled + .switch-slider { opacity: .6; cursor: wait; }

@media (max-width: 640px) { .availability-card { flex-wrap: wrap; } }