/* ---------- On-call calendar: a row per team, a column per day ---------- */
.calendar-nav { display: flex; flex-wrap: wrap; gap: 8px; }

.calendar-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
    table-layout: fixed;
}
.calendar-table th,
.calendar-table td {
    padding: 8px;
    border: 1px solid var(--rule-soft);
    vertical-align: top;
    text-align: left;
}
.calendar-table thead th {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy-dark);
    border-top: 0;
    border-bottom: 2px solid var(--navy-dark);
}
.calendar-table thead th:first-child { width: 132px; }
.cal-date { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }

/* Today is the column you are in: the same gold bar the nav uses */
.calendar-table thead th.today { box-shadow: inset 0 4px 0 var(--gold); }

.calendar-table .team-cell {
    font-family: var(--display);
    font-size: 18px;
    font-weight: 700;
    color: var(--navy-dark);
    background: #efeff7;
}
.cal-edit {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    background: var(--sheet);
    border: 1px solid var(--navy);
    border-radius: 6px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
}
.cal-edit:hover { background: var(--navy); color: #ffffff; }

/* One shift. A solid edge is the primary; a dashed outline is the
   secondary, who is the backup. */
.slot {
    margin-bottom: 6px;
    padding: 6px 8px;
    background: var(--stock-open);
    border-left: 4px solid var(--navy);
    border-radius: 0 4px 4px 0;
}
.slot:last-child { margin-bottom: 0; }
.slot-when { display: block; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.slot-who { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }

.slot:has(.slot-role) {
    background: var(--sheet);
    border: 1px dashed #8b96a9;
    border-radius: 4px;
}
.slot-role {
    display: inline-block;
    margin-left: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.slot.past { background: var(--grey-tint); border-left-color: #a9b2c2; }
.slot.past .slot-who { color: var(--muted); font-weight: 600; }

.slot-none { font-size: 14px; color: #8b96a9; }