/* ==========================================================================
   Calendar — availability timeline and day agenda
   ========================================================================== */

.cal-grid {
  grid-template-columns: minmax(0,1fr) 340px;
  align-items: start;
}

.cal {
  min-width: 1080px;
}

.cal-h,
.cal-r {
  display: grid;
  grid-template-columns: 200px minmax(0,1fr);
}

.cal-corner {
  padding: 10px 14px;
  font-size: var(--font-size-400);
  color: var(--color-text-muted);
  background: var(--color-slate-50);
  border-right: 1px solid var(--color-border);
  display: flex;
  align-items: center;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(14,minmax(0,1fr));
}

.cal-day {
  border: 0;
  border-left: 1px solid var(--color-slate-75);
  background: var(--color-slate-50);
  padding: 7px 2px;
  text-align: center;
  font-size: var(--font-size-200);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.cal-day b {
  font-size: var(--font-size-800);
  color: var(--color-text);
  font-weight: 600;
}

.cal-day small {
  font-size: var(--font-size-100);
  white-space: nowrap;
}

.cal-day.today {
  background: var(--color-green-50);
  color: var(--color-accent-strong);
}

.cal-day.sel {
  box-shadow: inset 0 -2px 0 var(--color-green-700);
}

.cal-r {
  border-top: 1px solid var(--color-divider);
}

.cal-lab {
  border: 0;
  border-right: 1px solid var(--color-border);
  background: var(--color-white);
  text-align: left;
  padding: 5px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  min-width: 0;
}

.cal-lab:hover b {
  color: var(--color-accent-strong);
}

.cal-lab b {
  font-weight: 500;
  font-size: var(--font-size-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-lab small {
  font-size: var(--font-size-200);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.cal-track {
  position: relative;
  height: 40px;
  background-image: linear-gradient(90deg,var(--color-slate-75) 1px,transparent 1px);
  background-size: calc(100% / 14) 100%;
}

.cal-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-accent);
  z-index: 2;
}

.cal-bar {
  position: absolute;
  top: 7px;
  height: 26px;
  border-radius: 7px;
  border: 0;
  padding: 0 8px;
  font-size: var(--font-size-300);
  font-weight: 500;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  color: var(--color-white);
  text-align: left;
}

.cal-bar:hover {
  filter: brightness(1.08);
  z-index: 3;
}

.cb-active {
  background: var(--color-blue-600);
}

.cb-confirmed,
.cb-preparing {
  background: var(--color-violet-600);
}

.cb-pending {
  background: var(--color-violet-100);
  color: var(--color-violet-800);
  box-shadow: inset 0 0 0 1.5px var(--color-violet-400);
}

.cb-completed {
  background: var(--color-slate-300);
  color: var(--color-slate-700);
}

.cb-overdue {
  background: var(--color-red-600);
}

.cb-maint {
  background: repeating-linear-gradient(135deg,var(--color-amber-200) 0 6px,var(--color-amber-100) 6px 12px);
  color: var(--color-amber-800);
}

@media (max-width: 1200px) {
  .cal-grid {
    grid-template-columns: minmax(0,1fr);
  }
}