.calendar-grid { display: grid; background-color: hsl(var(--secondary)); }
html.dark .calendar-grid { background-color: hsl(var(--muted)); }
.calendar-grid-cell { transition: background-color 0.15s ease-in-out; position: relative; }
.calendar-grid-cell.drop-target { background-color: hsl(var(--primary) / 0.1); }
.calendar-grid-cell.drop-target.is-conflict { background-color: hsl(var(--toast-error) / 0.2); }
.calendar-grid-cell .add-event-btn { opacity: 0; transition: opacity 0.2s ease; pointer-events: none;}
.calendar-grid-cell:hover .add-event-btn { opacity: 1; pointer-events: all;}
.calendar-event { position: absolute; transition: all 0.2s ease; background-color: hsl(var(--card)); border: 1px solid hsl(var(--border)); box-shadow: 0 2px 4px rgba(0,0,0,0.05); cursor: grab; }
html.dark .calendar-event { background-color: hsl(var(--secondary));}
.calendar-event:hover { transform: translateY(-2px) scale(1.02); z-index: 10; box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.calendar-event.is-dragging { opacity: 0.5; border-style: dashed; cursor: grabbing; z-index: 20; }
.calendar-event--new { border-left: 4px solid hsl(var(--status-new)); }
.calendar-event--upcoming { border-left: 4px solid hsl(var(--status-upcoming)); }
.calendar-event--completed { border-left: 4px solid hsl(var(--status-completed)); opacity: 0.7; }
.calendar-event--cancelled { border-left: 4px dashed hsl(var(--status-cancelled)); opacity: 0.5; cursor: pointer; }
.calendar-event--cancelled .text-content { text-decoration: line-through; }
.new-job-indicator { position: absolute; top: 8px; right: 8px; }
#month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.month-day-cell { min-height: 120px; transition: background-color 0.2s; cursor: pointer; }
.month-day-cell:hover { background-color: hsl(var(--accent)); }
.month-day-cell.other-month { background-color: hsl(var(--secondary) / 0.5); color: hsl(var(--muted-foreground)); cursor: default; }
.month-day-cell.other-month:hover { background-color: hsl(var(--secondary) / 0.5); }
.month-job-dot { width: 6px; height: 6px; border-radius: 50%; }
.agenda-item { border-left: 4px solid; transition: background-color 0.2s; }
.agenda-item:hover { background-color: hsl(var(--secondary)); }
html.dark .agenda-item:hover { background-color: hsl(var(--muted)); }
.divide-border { --tw-divide-color: hsl(var(--border)); }
.mobile-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.mobile-month-grid .month-day-cell { min-height: 60px; font-size: 12px; padding: 4px; }
.mobile-month-grid .month-job-dot { width: 4px; height: 4px; }