.cal-grid { display: grid; grid-template-columns: 56px repeat(var(--cal-cols, 7), 1fr); border: 1px solid var(--app-border, #e9eef2); border-radius: .5rem; overflow: hidden; font-size: .8125rem; }
.cal-head { background: #f8fafc; font-weight: 600; text-align: center; padding: .4rem 0; border-bottom: 1px solid #e9eef2; }
.cal-head.cal-today { background: #eff6ff; color: #1c64f2; }
.cal-timecol { position: relative; }
.cal-time { height: 28px; text-align: right; padding-right: .35rem; color: #94a3b8; font-size: .7rem; border-bottom: 1px solid #f1f5f9; }
.cal-daycol { position: relative; border-left: 1px solid #f1f5f9; }
.cal-slot { height: 28px; border-bottom: 1px solid #f1f5f9; cursor: default; }
.cal-grid[data-editable="1"] .cal-slot { cursor: pointer; }
.cal-grid[data-editable="1"] .cal-slot:hover { background: #eff6ff; }
.cal-appt { position: absolute; left: 2px; right: 2px; border-radius: 4px; padding: 2px 4px; color: #fff; overflow: hidden; cursor: pointer; background: var(--appt-color, #206bc4); font-size: .72rem; line-height: 1.1; }
.cal-appt.no_show, .cal-appt.cancelled { opacity: .5; text-decoration: line-through; }
.cal-appt.dragging { opacity: .6; z-index: 20; pointer-events: none; }
.cal-appt .appt-time { font-weight: 600; }
.cal-appt .appt-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cal-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; font-size: .8125rem; }
.cal-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.cal-legend-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: var(--swatch-color, #206bc4); }