.fa-cal-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.fa-cal-month-label { font-size: 15px; font-weight: 600; min-width: 160px; }
.fa-cal-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.fa-legend-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.fa-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.fa-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 4px;
}
.fa-cal-weekdays div { text-align: center; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }

/* The grid is a stack of week rows. Day cells sit underneath and the action
   bars float on a layer above them, so a multi-day bar runs unbroken across
   the cell dividers instead of being cut into one segment per day. */
.fa-cal-grid { display: flex; flex-direction: column; gap: 6px; }

.fa-cal-week {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.fa-cal-week-days { display: grid; grid-template-columns: repeat(7, 1fr); }

.fa-cal-day {
  min-height: calc(30px + var(--fa-bars-h, 0px) + 6px);
  padding: 5px 7px;
  cursor: pointer;
  border-right: 1px solid var(--border);
}
.fa-cal-day:last-child { border-right: none; }
.fa-cal-day:hover { background: var(--green-light); }
.fa-cal-day-empty { background: var(--bg); cursor: default; }
.fa-cal-day-empty:hover { background: var(--bg); }
.fa-cal-day-num { font-size: 13px; font-weight: 600; }
.fa-cal-day-today { background: var(--green-light); box-shadow: inset 0 0 0 2px var(--green); }
.fa-cal-day-today .fa-cal-day-num { color: var(--green); }
.fa-cal-day-overdue { background: var(--danger-bg); box-shadow: inset 0 0 0 2px var(--danger); }
.fa-cal-day-overdue .fa-cal-day-num { color: var(--danger); }

/* Bar layer: starts below the day numbers, ignores pointer events itself so
   the day cells underneath stay clickable, bars re-enable them. */
.fa-cal-week-bars {
  position: absolute;
  left: 0; right: 0;
  top: 26px;
  height: var(--fa-bars-h, 0px);
  pointer-events: none;
}
.fa-cal-bar {
  position: absolute;
  height: 17px;
  border-radius: 4px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 17px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  padding: 0 6px;
  box-sizing: border-box;
  transform: translateX(1px);
}
.fa-cal-bar:hover { filter: brightness(1.12); }

/* State ring. Drawn inset rather than around the outside so it survives the
   week row's overflow clipping and never nudges the bar's geometry. The tones
   are deliberately brighter than the palette's own green/red — the ring sits
   on top of a saturated category colour and has to stay legible there. */
.fa-cal-bar-done { box-shadow: inset 0 0 0 2px #4ADE80; }
.fa-cal-bar-late { box-shadow: inset 0 0 0 2px #FF7A6B; }

/* A single-day action is only as wide as its own text, never the whole cell,
   and still never spills past that day. */
.fa-cal-bar-day {
  width: max-content !important;
  max-width: calc(100% / 7 - 6px);
  justify-content: flex-start;
}
/* A stretch continuing from the previous week loses its left cap. */
.fa-cal-bar-cont { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* One copy of the caption per day the bar covers; when a cell is too narrow
   the copy simply shrinks away instead of pushing the bar out of shape. */
.fa-cal-bar-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}

@media (max-width: 900px) {
  .fa-cal-bar { font-size: 9px; padding: 0 4px; }
  .fa-cal-bar-txt ~ .fa-cal-bar-txt { display: none; } /* one caption is enough when narrow */
}
@media (max-width: 700px) {
  .fa-cal-day { padding: 4px 5px; }
  .fa-cal-weekdays div { font-size: 9px; }
}