/* Employee self-service pages.
   Shared shell, toolbar, actions and state colours live in app primitives.
   This file only owns the employee-specific calendar layout; shared calendar structure/cards live in components/calendar.css. */

.employee-calendar-card,
.employee-schedule-tab-panel {
  min-width: 0;
  min-height: 0;
}

.employee-calendar-card,
.employee-schedule-tab-panel { display: flex; flex-direction: column; }
.employee-calendar-card {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--rst-ui-line);
  border-radius: var(--rst-ui-radius-xl);
  background: var(--rst-calendar-board-bg);
}
.employee-schedule-tab-panel {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0;
  background: var(--rst-ui-workspace-body);
}

.employee-schedule-tab-panel.is-schedule { display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; }
.employee-schedule-tab-panel.is-worked { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.employee-schedule-tab-panel.is-schedule { gap: 10px; }

.employee-schedule-board-head,
.employee-schedule-row {
  display: grid;
  grid-template-columns: 88px repeat(2,minmax(130px,1fr));
  gap: 10px;
  align-items: stretch;
}

.employee-schedule-board-head,
.employee-schedule-grid { padding-inline: 14px; }
.employee-schedule-board-head {
  color: var(--rst-ui-muted);
  font-size: 10px;
  font-weight: var(--rst-fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.employee-schedule-board-head { font-size: 11px; }
.employee-schedule-board-head strong { color: var(--rst-ui-text); text-align: center; }

.employee-schedule-grid {
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(7,minmax(58px,1fr));
  gap: 7px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.employee-schedule-day {
  min-height: 0;
  padding: 6px 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--rst-ui-divider-soft);
  border-radius: var(--rst-ui-radius-sm);
  background: transparent;
  text-align: center;
}
.employee-schedule-day strong {
  color: var(--rst-ui-text);
  line-height: 1;
  font-weight: var(--rst-fw-display);
}
.employee-schedule-day strong { font-size: 15px; }
.employee-schedule-day span { color: var(--rst-ui-muted); font-size: 10px; font-weight: var(--rst-fw-bold); }

/* My Time uses the shared simple calendar grid + an Actuals-style trailing week-total column.
   The grid stays weeks-as-rows / weekdays-as-columns; this module only owns the extra column,
   its density and the per-column zebra alignment. */
.employee-worked-calendar-scroll { min-height: 0; }
.employee-worked-weekdays,
.employee-worked-calendar {
  grid-template-columns: repeat(7,minmax(var(--rst-calendar-simple-day-min,132px),1fr)) minmax(74px,86px);
  min-width: calc(7 * var(--rst-calendar-simple-day-min,132px) + 86px);
}
.employee-worked-calendar { grid-template-rows: repeat(var(--employee-time-week-count,6),minmax(var(--rst-calendar-simple-day-h),auto)); }
.employee-worked-day { --rst-calendar-simple-day-h: 116px; }
.employee-worked-day .rs-calendar-day__head strong { font-size: 13px; }
.employee-worked-slots { align-content: start; }

/* Keep weekday-column right borders intact under the 8-column layout (shared :nth-child(7n) assumes 7). */
.employee-worked-weekdays > span:nth-child(7n),
.employee-worked-calendar > .rs-calendar-day:nth-child(7n) { border-right: 1px solid var(--rst-ui-divider-soft); }
.employee-worked-weekdays > span:last-child { border-right: 0; }

/* Trailing week-total column (one cell per week row), echoing the Actuals week total. */
.employee-week-total-head { color: var(--rst-ui-text-heading); }
.employee-week-total {
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 7px;
  border-bottom: 1px solid var(--rst-ui-divider);
  background: var(--rst-ui-workspace-header);
}
.employee-week-total span {
  color: var(--rst-ui-muted);
  font-size: 9px;
  font-weight: var(--rst-fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.employee-week-total b {
  color: var(--rst-ui-text);
  font-size: 13px;
  font-weight: var(--rst-fw-display);
  line-height: 1;
}

.employee-calendar-card .rs-weekly-legend { min-height: 40px; justify-content: center; }

/* Employee self-service slot composition. Shared colors, surfaces and density live in components/calendar.css. */
.employee-slot {
  cursor: pointer;
}

.employee-slot.is-readonly { cursor: default; }

.employee-slot.is-weekly {
  height: 100%;
}

.employee-slot.is-lunch {
  --service-accent: var(--rst-service-lunch-accent);
  --service-bg: var(--rst-service-lunch-bg);
  --service-border: var(--rst-service-lunch-border);
}
.employee-slot.is-evening {
  --service-accent: var(--rst-service-evening-accent);
  --service-bg: var(--rst-service-evening-bg);
  --service-border: var(--rst-service-evening-border);
}

/* My Schedule (weekly) keeps service-tinted icons (lunch/evening identity); My Time (worked,
   is-compact) inherits the shared state-tinted .rs-calendar-card-icon so its cards read like Actuals. */
.employee-slot.is-weekly .employee-slot-icon {
  border: 1px solid var(--service-border,var(--rst-ui-divider-soft));
  background: var(--service-bg,var(--rst-ui-divider-soft));
  color: var(--service-accent,var(--shift-accent));
}
.employee-slot.is-weekly.rs-calendar-card--absence .employee-slot-icon {
  border-color: var(--rst-op-absence-border);
  background: var(--rst-op-absence-bg);
  color: var(--rst-op-absence-accent);
}
.employee-slot-absence-icon { --rs-absence-icon-size: 17px; --rs-absence-icon-box: 17px; opacity: .92; }

.employee-slot small { color: var(--rst-ui-muted); font-weight: var(--rst-fw-bold); }

.employee-slot.rs-calendar-card--actual small,
.employee-slot.rs-calendar-card--live small { color: var(--rst-ui-muted); }

.employee-slot-status.rs-status-icon { position: absolute; z-index: 4; top: 5px; right: 5px; width: 18px; height: 18px; flex-basis: 18px; }
.employee-slot-status.rs-status-icon svg { width: 10px; height: 10px; }
.rs-calendar-card--density-icon-dense .employee-slot-status.rs-status-icon { top: 4px; right: 4px; width: 16px; height: 16px; flex-basis: 16px; }
.rs-calendar-card--density-icon-dense .employee-slot-status.rs-status-icon svg { width: 9px; height: 9px; }