/* ===== 19-shifts.css =====
   Schichtbetrieb — shift chips on the dashboards, the management grid,
   staff/template cards, and the A4 print plan. */

/* ── Dashboard shift chip strip (sits above each day tile) ──
   Up to 3 chips per line, then wraps. A reserved min-height keeps all day
   tiles aligned at the top regardless of how many people work that day. */
.day-shifts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-content: start;
  gap: 3px 4px;
  min-height: 1.4rem;
  margin: 0 0 0.4rem;
}

.shift-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;             /* allow the chip to shrink to its 1/3 cell */
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;         /* never spill past the day tile width */
  text-overflow: ellipsis;
}

.shift-chip__label {
  font-weight: 700;
}

.shift-chip__time {
  font-variant-numeric: tabular-nums;
}

/* Mini/walk shifts: lighter, dashed to read as a helper slot. */
.shift-chip--mini {
  opacity: 0.9;
  border: 1px dashed rgba(255, 255, 255, 0.85);
}

/* Night shifts: subtle ring so the overnight handler stands out. */
.shift-chip--night {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* ── Management month timeline (one row per day) ── */
.shift-timeline {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Each day is its own bordered card with a gap to the next. */
.stl-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: stretch;
  border: 1px solid #9a9a9a;
  border-radius: 6px;
  overflow: hidden;
}
/* Larger gap before each Monday to group weeks (same border as other days). */
.stl-row.week-start { margin-top: 12px; }

.stl-row--head {
  background: #f7f8f5;
  border-color: #c8c8c8;
  font-size: 0.72rem;
  color: #666;
  font-weight: 600;
}

.stl-row.weekend { background: #e6e6e2; }
.stl-row.weekend .stl-day { color: #555; }
.stl-row.today { background: var(--brand-green-light); }

.stl-day {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-right: 1px solid #eee;
  font-size: 0.78rem;
}
.stl-day__wd { font-weight: 700; }
.stl-day__date { color: #666; }

.stl-add {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--brand-green);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 0;
}

/* The 0–24h track holds full-height hour gridlines plus two stacked lanes
   (dog-count bars on top, staff shift bars below). */
.stl-track {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 3px 0;
}

.stl-gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #f0f0f0;
}
.stl-gridline--edge { background: #dcdcdc; }
/* Business-hour boundaries (07:00 / 18:00) — darker than the hourly lines. */
.stl-gridline--biz { background: #9aab84; width: 2px; }

.stl-tick {
  position: absolute;
  top: 2px;
  transform: translateX(-50%);
  color: #999;
}
.stl-tick--first { transform: none; }
.stl-tick--last { transform: translateX(-100%); }
.stl-track--head { display: block; padding: 2px 0; min-height: 16px; }

.stl-lane {
  position: relative;
  height: 20px;
}
.stl-lane--dogs { margin-bottom: 2px; }

/* Dog-count bars over the day (7–18) and night (18–07) windows. */
.stl-dogbar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
}
.stl-dogbar--night { border-top-right-radius: 0; border-bottom-right-radius: 0; opacity: 0.85; }
/* Morning continuation (00–07) of the previous night — flat left edge. */
.stl-dogbar--morning { border-top-left-radius: 0; border-bottom-left-radius: 0; opacity: 0.85; }

.stl-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 4px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.stl-bar__who { font-weight: 700; }
[role="button"].stl-bar { cursor: pointer; }
[role="button"].stl-bar:hover { filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset; }

/* Night bars clamp to the day's end — hint the continuation with a soft edge. */
.stl-bar--wrap { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* Morning tail (00:00–end) of the previous day's night shift — flat left edge. */
.stl-bar--cont { border-top-left-radius: 0; border-bottom-left-radius: 0; opacity: 0.9; }

.stl-bar--cancelled {
  background: repeating-linear-gradient(45deg, #eee, #eee 4px, #e0e0e0 4px, #e0e0e0 8px);
  border: 1px dashed #bbb;
  color: #999;
}
.stl-bar--cancelled .stl-bar__btn {
  background: transparent;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0;
  text-decoration: line-through;
}

@media (max-width: 700px) {
  .stl-row { grid-template-columns: 70px 1fr; }
  .stl-bar, .stl-dogbar { font-size: 0.6rem; }
}

/* Print: keep the timeline compact so a month fits on A4 portrait. */
.shift-timeline--print { gap: 2px; }
.shift-timeline--print .stl-row { border-color: #888; }
.shift-timeline--print .stl-lane { height: 16px; }
.shift-timeline--print .stl-bar,
.shift-timeline--print .stl-dogbar { font-size: 0.62rem; }
@media print {
  .shift-print-header .actions { display: none; }
  .stl-row.today { background: #fff; }
}

/* ── Staff & template cards ── */
.shift-members { margin-top: 12px; }

.shift-member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.shift-member-card {
  border: 1px solid var(--brand-green-light);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.shift-member-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  margin-bottom: 6px;
}

.shift-member-card__name { flex: 1; }
.shift-member-card__edit { font-size: 0.78rem; }

.shift-template-list { list-style: none; padding: 0; margin: 0; }

.shift-template-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-top: 1px dotted var(--brand-green-light);
  font-size: 0.82rem;
}

.shift-template-list__actions { display: flex; gap: 4px; align-items: center; }
.shift-template-list__actions form { display: inline; margin: 0; }

/* ── Add/edit dialog ── */
.shift-dialog {
  border: 1px solid var(--brand-green-light);
  border-radius: 10px;
  padding: 18px 20px;
  max-width: 420px;
  width: 90%;
}

.shift-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.shift-dialog__form label { display: block; font-weight: 600; margin-top: 8px; }
.shift-dialog__form input,
.shift-dialog__form select { width: 100%; }

.shift-dialog__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin: 16px 0 0;
  padding: 0;
}

.shift-form p label { font-weight: 600; }