/* Staff scheduling — card-row grids (subgrid for directory + wage snapshot) */

/* Month calendar grid */
.staff-schedule-grid-wrap {
    overflow: visible;
}

.staff-schedule-grid {
    table-layout: fixed;
    width: 100%;
    min-width: calc(var(--staff-schedule-cols, 7) * 7.5rem);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.staff-schedule-grid thead th,
.staff-schedule-grid tbody td {
    width: calc(100% / var(--staff-schedule-cols, 7));
    min-width: 0;
    vertical-align: top;
}

.staff-schedule-grid-head {
    position: sticky;
    top: 0;
    z-index: 3;
}

.staff-schedule-grid-head__cell {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: #f8f9fa !important;
    box-shadow: 0 1px 0 #dee2e6;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
}

.staff-directory-list {
    grid-template-columns:
        minmax(11rem, 1.6fr)
        minmax(6.5rem, 0.9fr)
        minmax(3rem, 0.45fr)
        minmax(6.5rem, 0.9fr)
        minmax(4.5rem, 0.75fr)
        minmax(7rem, 1.15fr)
        minmax(5rem, 0.7fr)
        minmax(9.5rem, 9.5rem);
    min-width: 52rem;
}

.staff-directory-list-header span:last-child {
    justify-self: end;
}

.staff-directory-list .directory-card-row__actions .list-action-bar {
    justify-content: flex-end;
}

.staff-directory-list .staff-directory-row > .directory-card-row__meta:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-directory-row__availability {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f766e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-usual-avail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.5rem;
}

.staff-usual-avail__day {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.45rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background: #fff;
    min-height: 4.5rem;
}

.staff-usual-avail__day.is-on {
    border-color: #86efac;
    background: #f0fdf4;
}

.staff-usual-avail__day.is-centre-closed {
    background: #f8fafc;
    color: #64748b;
}

.staff-usual-avail__day-name {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #0f172a;
}

.staff-usual-avail__closed {
    font-size: 0.6875rem;
    color: #64748b;
}

.staff-usual-avail__times {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.staff-usual-avail__times .staff-avail-time-input {
    min-width: 0;
}

.staff-wage-list {
    grid-template-columns:
        minmax(11rem, 1.6fr)
        minmax(5rem, 0.75fr)
        minmax(5.5rem, 0.85fr)
        minmax(5.5rem, 0.85fr)
        minmax(5.5rem, 0.85fr)
        minmax(5.5rem, 0.85fr);
    min-width: 44rem;
}

.staff-wage-row--total {
    background: #f8fafc !important;
    font-weight: 600;
}

.staff-wage-row--total .directory-card-row__meta {
    color: #334155;
    font-weight: 600;
}

.staff-scheduled-shift-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem 0.45rem;
    min-width: 0;
    cursor: grab;
}

.staff-scheduled-shift-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.06rem;
    min-width: 0;
}

.staff-scheduled-shift-row__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-scheduled-shift-row:active {
    cursor: grabbing;
}

.staff-scheduled-shift-row__actions,
.staff-available-row__actions {
    flex-shrink: 0;
    justify-self: end;
}

.staff-available-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    cursor: grab;
}

.staff-available-row:active {
    cursor: grabbing;
}

.staff-available-row__main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.staff-scheduling-row-accent {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), var(--staff-accent-inset, inset 4px 0 0 #64748b);
}

.staff-scheduling-staff-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.staff-scheduled-shift-row__time {
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #334155;
    white-space: nowrap;
}

.staff-schedule-sidebar-list.retention-student-list {
    gap: 0.35rem;
    min-width: 0;
}

.staff-schedule-sidebar-list .student-card-row {
    padding: 0.45rem 0.5rem 0.45rem 0.6rem;
    min-width: 0;
}

.staff-schedule-sidebar-list .list-action-bar {
    justify-content: flex-end;
    gap: 0.15rem;
}

.staff-schedule-sidebar-list .list-action-btn {
    min-width: 2.05rem;
    padding: 0.1rem 0.08rem 0.12rem;
}

.staff-schedule-sidebar-list .staff-available-row .list-action-label {
    max-width: 2.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scheduled rows — icon-only actions to save sidebar space */
.staff-scheduled-shift-row .list-action-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.staff-scheduled-shift-row .list-action-btn {
    min-width: 1.85rem;
    padding: 0.2rem 0.15rem;
}

/* Extra hours shifts — dashed row in sidebar; calendar chips styled below */
.staff-scheduled-shift-row--extra {
    border-style: dashed !important;
    border-width: 1px;
}

.staff-schedule-shift--extra {
    border: 1px dashed rgba(146, 64, 14, 0.55) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.staff-schedule-shift--extra .staff-schedule-shift-name::after {
    content: " · Extra";
    font-weight: 700;
    font-size: 0.58rem;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .staff-directory-list {
        grid-template-columns:
            minmax(10rem, 1.4fr)
            minmax(5.5rem, 0.85fr)
            minmax(5.5rem, 0.85fr)
            minmax(4rem, 0.7fr)
            minmax(6rem, 1fr)
            minmax(4.5rem, 0.7fr)
            minmax(9rem, 9rem);
        min-width: 46rem;
    }

    .staff-wage-list {
        min-width: 38rem;
    }
}