/* Familiar month view: light grid, centered dates and compact event strips. */
#monthly-calendar{border-radius:16px;box-shadow:none;overflow:hidden}
#monthly-calendar .planner-heading{padding:20px 24px;background:#fff;border-bottom:0;gap:15px}
#monthly-calendar .planner-icon,#monthly-calendar .planner-identity .eyebrow,#calendar-instructions{display:none}
#monthly-calendar .planner-identity h2{margin:0;font-size:21px;letter-spacing:-.5px}
#monthly-calendar .planner-main{padding:0 18px}
#monthly-calendar .calendar-toolbar{padding:12px 0 20px}
#monthly-calendar .calendar-month-nav{gap:20px;flex-direction:row-reverse}
#monthly-calendar .calendar-navigation{gap:5px}
#monthly-calendar #calendar-today{order:-1;margin-right:14px;padding:9px 17px;border-radius:6px;font-size:12px;min-height:36px;color:#233c5c}
#monthly-calendar .calendar-arrow{border:0;border-radius:50%;background:transparent;width:34px;height:34px;color:#5b6470;font-size:26px}
#monthly-calendar .calendar-arrow:hover{background:#f0f2f5}
#monthly-calendar .calendar-month-title{gap:8px}
#monthly-calendar .calendar-month-title h3{font-size:23px;font-weight:600;letter-spacing:-.5px}
#monthly-calendar #calendar-year{background:none;border:0;padding:0;font-size:22px;color:#233c5c;font-weight:400}
#monthly-calendar #calendar-technician{font-size:12px;background:#f8fafd;border-radius:7px;padding:10px 12px}
#monthly-calendar .calendar-scroll{border:1px solid #dadfe5;border-radius:0;overflow:hidden}
#monthly-calendar .calendar-grid{min-width:0}
#monthly-calendar .calendar-weekdays{background:#fff}
#monthly-calendar .calendar-weekdays>div{font-size:11px;font-weight:500;color:#66727e;padding:12px 0 8px}
#monthly-calendar .calendar-week:not(.calendar-weekdays){border-color:#dadfe5}
#monthly-calendar .calendar-day{min-height:136px;padding:3px 3px 7px;border-color:#dadfe5;background:#fff}
#monthly-calendar .calendar-day.is-weekend{background:#fcfcfd}
#monthly-calendar .calendar-day.other-month{background:#f7f8fa}
#monthly-calendar .calendar-day.is-today{background:#fff}
#monthly-calendar .calendar-day.is-selected{box-shadow:none}
#monthly-calendar .calendar-day:hover{background:#f7faff}
#monthly-calendar .calendar-day-top{margin-bottom:4px;position:relative;justify-content:center}
#monthly-calendar .calendar-date{flex:none;justify-content:center;height:30px;gap:0;border-radius:50%}
#monthly-calendar .calendar-day-number{font-size:12px;font-weight:500;width:28px;height:28px;border-radius:50%}
#monthly-calendar .is-today .calendar-day-number{background:#173d72;color:white;box-shadow:none}
#monthly-calendar .calendar-day-count{display:none}
#monthly-calendar .calendar-quick-add{position:absolute;right:1px;top:0;opacity:0;transition:opacity .15s;font-size:17px}
#monthly-calendar .calendar-day:hover .calendar-quick-add,#monthly-calendar .calendar-quick-add:focus-visible{opacity:1}
#monthly-calendar .calendar-events{display:flex;flex-direction:column;gap:3px}
#monthly-calendar .calendar-event{display:flex;align-items:center;gap:4px;min-height:23px;margin:0;padding:3px 5px;border:0;border-radius:4px;background:var(--task-bg,#eef2f7);color:var(--task-ink,#23446c);box-shadow:inset 3px 0 var(--task-color,#8399b6);line-height:1.3;transition:filter .15s}
#monthly-calendar .calendar-event:hover{transform:none;filter:brightness(.95);box-shadow:inset 3px 0 var(--task-color,#8399b6),0 2px 5px #16356013}
#monthly-calendar .calendar-event-title{display:block;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;line-height:1.4;flex:1}
#monthly-calendar .calendar-event-time{font-size:10px;font-weight:600;white-space:nowrap;max-width:62px;overflow:hidden;text-overflow:ellipsis;margin:0}
#monthly-calendar .calendar-event small,#monthly-calendar .calendar-owner{display:none}
#monthly-calendar .calendar-event-state{display:none}
#monthly-calendar .calendar-event.resolved .calendar-event-title:before{content:'✓ ';font-weight:800}
#monthly-calendar .calendar-event.resolved{opacity:.7}
#monthly-calendar .calendar-event.cancelled{background:#fff0f0;color:#b3261e;box-shadow:inset 3px 0 #d23c36}
#monthly-calendar .calendar-event.cancelled .calendar-event-title{text-decoration:line-through}
#monthly-calendar .calendar-more{font-size:10px;background:transparent;color:#5b6674;text-align:left;padding:4px 7px;min-height:22px;border-radius:4px}
#monthly-calendar .calendar-more:hover{background:#e9edf4}
#monthly-calendar .calendar-vacation{padding:3px 5px;border-radius:3px;font-size:9px}
#monthly-calendar .calendar-absences{margin-bottom:4px}
#monthly-calendar .calendar-footer{padding:12px 0 18px}
#monthly-calendar .planner-agenda{padding:23px 24px;background:#fafbfd}
#monthly-calendar .agenda-heading h3{font-size:20px}
/* Clicking a date opens a focused day agenda, similar to a calendar popover. */
#calendar-day-details{position:fixed;margin:auto;padding:25px;width:min(470px,calc(100vw - 32px));max-height:80dvh;overflow:auto;border:1px solid #e0e5ec;border-radius:17px;background:#fff;box-shadow:0 20px 80px #142c4b30;color:#163560}
#calendar-day-details:not([open]){display:none}
#calendar-day-details::backdrop{background:#17345626;backdrop-filter:blur(2px)}
#calendar-day-details .calendar-day-heading{align-items:flex-start;flex-direction:row;margin-bottom:20px}
#calendar-day-details .calendar-day-heading h3{font-size:18px;font-weight:650;line-height:1.5}
.calendar-day-close{width:32px;height:32px;flex-shrink:0;border:0;background:#f0f3f7;color:#5d6c7e;border-radius:50%;font-size:24px;line-height:1;cursor:pointer}
#calendar-day-details .calendar-day-list{grid-template-columns:1fr;gap:10px}
#calendar-day-details .calendar-day-task{padding:15px;gap:5px;border-radius:8px;box-shadow:none}
#calendar-day-details .calendar-day-task:hover{transform:none;background:#f6f9fc}
#calendar-day-details #calendar-day-add{margin-top:20px;width:100%;font-size:12px}
@media(max-width:700px){
 #monthly-calendar .planner-heading{padding:18px 15px}
 #monthly-calendar .planner-main{padding:0 8px}
 #monthly-calendar .calendar-toolbar{padding:10px 4px 18px;gap:14px}
 #monthly-calendar .calendar-month-nav{gap:10px}
 #monthly-calendar .calendar-month-title h3{font-size:20px}
 #monthly-calendar #calendar-year{font-size:19px}
 #monthly-calendar #calendar-today{padding:7px 10px;margin-right:3px;font-size:11px}
 #monthly-calendar .calendar-arrow{width:28px;height:30px}
 #monthly-calendar .calendar-day{min-height:115px;padding:3px 2px 5px}
 #monthly-calendar .calendar-event{padding:3px 4px;min-height:21px;gap:0}
 #monthly-calendar .calendar-event-title{font-size:9px}
 #monthly-calendar .calendar-event-time{display:none}
 #monthly-calendar .calendar-more{font-size:9px;padding:3px 1px}
 #monthly-calendar .calendar-day-number{font-size:11px;width:25px;height:25px}
 #monthly-calendar .calendar-vacation{font-size:8px;padding:3px 2px;overflow:hidden;text-overflow:ellipsis}
 #monthly-calendar .planner-agenda{padding:20px 15px}
}
@media(prefers-reduced-motion:no-preference){#calendar-day-details[open]{animation:day-pop-in .16s ease-out}@keyframes day-pop-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}}