/*
  Overrides for Radzen.Blazor's RadzenScheduler (loaded via css/default-base.css, a deliberately bare
  Radzen theme) so the shift calendar matches this app's own design tokens instead of Radzen's default
  light-mode look. Class names below were verified against the actual rendered DOM (Radzen's own class
  names don't always match its public documentation) — see .rz-view-header/.rz-scheduler-nav, whose
  unstyled light-gray background was the reported "day names unreadable" bug.
*/

.scheduling-page .rz-scheduler {
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

/* Toolbar (prev/next/today, month title, month/week switch) and the day-name header row both come
   from Radzen with the same unstyled light-gray fill — the exact bug reported. */
.scheduling-page .rz-scheduler-nav,
.scheduling-page .rz-view-header {
    background: var(--bg-surface-2);
    border-color: var(--border);
}

.scheduling-page .rz-scheduler-nav-title {
    color: var(--text-primary);
    font-weight: 600;
}

.scheduling-page .rz-slot-header {
    color: var(--text-secondary);
    font-weight: 600;
}

.scheduling-page .rz-scheduler * {
    border-color: var(--border);
}

.scheduling-page .rz-slot,
.scheduling-page .rz-view-content {
    background: var(--bg-surface);
}

.scheduling-page .rz-slot:hover {
    background: var(--bg-hover);
}

.scheduling-page .rz-slot-title {
    color: var(--text-primary);
}

/* Prev/Next/Today buttons and the Month/Week switch — Radzen renders these as plain white pills by
   default, which reads as a light-mode chip stranded on a dark page. */
.scheduling-page .rz-button.rz-prev,
.scheduling-page .rz-button.rz-next,
.scheduling-page .rz-button.rz-today,
.scheduling-page .rz-scheduler-nav-views .rz-button:not(.rz-state-active) {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
}

.scheduling-page .rz-button.rz-prev:hover,
.scheduling-page .rz-button.rz-next:hover,
.scheduling-page .rz-button.rz-today:hover,
.scheduling-page .rz-scheduler-nav-views .rz-button:not(.rz-state-active):hover {
    background: var(--bg-hover);
}

.scheduling-page .rz-scheduler-nav-views .rz-button.rz-state-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

/* Shift blocks — RadzenScheduler renders each appointment as .rz-event > .rz-event-content; color and
   text come from the AppointmentRender template's inline style (per-status color, see Schedule.razor). */
.scheduling-page .rz-event-content {
    border-radius: 6px;
    font-size: .8125rem;
    line-height: 1.3;
    padding: 2px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.scheduling-page .rz-event-content.shift-conflict {
    outline: 2px solid var(--danger);
    outline-offset: -2px;
}

/* Current-time indicator — see wwwroot/js/scheduling.js registerNowLine, which owns this element and
   re-parents it into whichever time grid (week/day) is currently rendered. */
.scheduling-page .rz-week-view .rz-slots,
.scheduling-page .rz-day-view .rz-slots {
    position: relative;
}

.current-time-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--danger);
    z-index: 5;
    pointer-events: none;
}

.current-time-line::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--danger);
}

/* Dragging a roster entry onto the calendar to create a shift instantly. */
.scheduling-page.drag-active .rz-slot:hover {
    background: var(--accent-soft-bg);
}

.shift-legend {
    display: flex;
    gap: var(--space-4, 16px);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-3, 12px);
    font-size: .8125rem;
    color: var(--text-secondary);
}

.shift-legend .dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
}

/* Staff roster sidebar — drag a name onto the calendar to create a shift for them instantly. */
.roster-layout {
    display: flex;
    gap: var(--space-4, 16px);
    align-items: flex-start;
}

.roster-sidebar {
    flex: 0 0 220px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-3, 12px);
}

.roster-sidebar h3 {
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2, 8px);
}

.roster-hint {
    font-size: .75rem;
    color: var(--text-muted);
    margin-bottom: var(--space-3, 12px);
}

.roster-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 480px;
    overflow-y: auto;
}

.roster-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 8px;
    border-radius: var(--radius-md, 8px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    cursor: grab;
    user-select: none;
}

.roster-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.roster-item:active {
    cursor: grabbing;
}

.roster-item .name {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.roster-item .role {
    font-size: .6875rem;
    color: var(--text-muted);
}

.roster-scheduler {
    flex: 1;
    min-width: 0;
}

.roster-collapsed .roster-sidebar {
    display: none;
}