/* Admin period views. The dot is 10px; its independent hit target stays usable. */
.period-team-legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding:12px 18px;border-bottom:1px solid var(--border);color:var(--text-secondary,var(--muted));font-size:11px;background:var(--surface)}
.period-team-legend>span{display:inline-flex;align-items:center;gap:6px;min-height:20px}
.period-team-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--period-event-paint,#7c7b86);flex:none}
.period-team-legend .period-symbol-legend{color:var(--muted)}
.period-team-legend .period-legend-block{border-radius:2px;background:none;border:2px solid currentColor}
.period-team-legend .period-legend-room{border-radius:1px;background:none;border:1px dashed currentColor;transform:rotate(45deg);width:8px;height:8px;margin:1px}
.period-team-legend .period-legend-external{background:none;border:1px dashed currentColor}
.period-time-week{display:grid;grid-template-columns:58px minmax(0,1fr);min-width:1150px;--period-heading-height:100px}
.period-time-week>.period-grid{align-items:start}
.period-time-week .period-day{gap:0;padding:0;display:block;min-height:0;position:relative}
.period-time-week .period-day-top{display:block;position:sticky;top:0;z-index:3;height:var(--period-heading-height);padding:8px 9px;background:var(--surface);border-bottom:1px solid var(--border);overflow:hidden}
.period-day-title{display:flex;align-items:center;justify-content:space-between;gap:5px}
.period-time-week .period-day-heading{font-size:11px;white-space:normal;min-height:35px}
.period-time-week .period-hours{font-size:9px;line-height:1.5}
.period-time-week .period-capacity{font-size:9px;margin-top:4px}
.period-time-axis{position:sticky;left:0;z-index:4;background:var(--surface);border-right:1px solid var(--border)}
.period-axis-heading{position:sticky;top:0;z-index:5;height:var(--period-heading-height);display:flex;justify-content:center;align-items:center;background:var(--surface-soft);color:var(--muted);font-size:10px;border-bottom:1px solid var(--border)}
.period-time-labels{position:relative;color:var(--muted);font-size:10px}
.period-time-labels>span{position:absolute;right:9px;transform:translateY(-50%);background:var(--surface);padding:0 2px;white-space:nowrap}
.period-time-labels>span:first-child{transform:translateY(2px)}
.period-time-labels>span:last-child{transform:translateY(-100%)}
.period-week-track{position:relative;background:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,var(--border) 29px,var(--border) 30px,transparent 30px,transparent 59px,var(--border) 59px,var(--border) 60px)}
.period-closed-band{position:absolute;inset-inline:0;background:repeating-linear-gradient(135deg,transparent 0,transparent 5px,color-mix(in srgb,var(--muted) 9%,transparent) 5px,color-mix(in srgb,var(--muted) 9%,transparent) 6px);pointer-events:none}
.period-track-empty{position:absolute;top:16px;left:8px;right:8px;font-size:10px;color:var(--muted);text-align:center;pointer-events:none}
.period-week-event{position:absolute;z-index:1;padding-bottom:2px;min-height:14px}
.period-week-event>.period-event,.period-week-event>.external-event{width:100%;height:100%;min-height:0;overflow:hidden;border-radius:5px;padding:4px 5px;gap:2px;font-size:10px;box-shadow:0 0 0 1px var(--surface)}
.period-week-event>.period-event{border-left-color:var(--period-event-color);background:color-mix(in srgb,var(--period-event-color) 12%,var(--surface));border-top:1px solid color-mix(in srgb,var(--period-event-color) 25%,var(--border))}
.period-week-event .period-event strong{font-size:11px}
.period-week-event .period-event-time{font-size:9px;gap:3px;white-space:nowrap}
.period-week-event .period-event-time svg{width:10px;height:10px}
.period-week-event .period-event>span:not(.period-event-time),.period-week-event .period-event small{font-size:9px;color:var(--text-secondary,var(--muted))}
.period-week-event>.period-event-multi{border-left-width:5px;border-left-style:double;background-image:linear-gradient(to right,transparent calc(100% - 3px),var(--period-event-color) calc(100% - 3px))}
.period-week-event>.period-event-block{background:var(--surface-soft);border-left-style:dashed}
.period-week-event>.period-event-room{background:var(--surface-soft);border-style:dashed}
.period-week-event-narrow .period-event-time svg,.period-week-event-narrow .period-event-end,.period-week-event-narrow .period-event small{display:none}
.period-time-week .period-open-day{border-top:1px solid var(--border);border-radius:0;margin:0;padding:7px 9px;width:100%;background:var(--surface)}
.period-dot-month{min-width:770px}
.period-dot-month .period-day{padding:8px;min-height:142px;gap:5px}
.period-dot-month .period-day-top{display:block;min-height:49px}
.period-dot-month .period-day-heading{font-size:13px;min-height:26px;padding:2px 0}
.period-dot-month .period-hours{font-size:9px}
.period-dot-month .period-capacity{font-size:9px}
.period-dot-month .period-count{font-size:9px;width:19px;height:19px;min-width:19px}
.period-month-dots{display:flex;align-content:flex-start;align-items:flex-start;flex-wrap:wrap;gap:0;min-height:24px}
.period-dot-button{display:inline-flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;min-height:24px;padding:0;border:0;background:transparent;border-radius:5px;position:relative}
.period-dot{display:block;width:10px;height:10px;flex:none;border-radius:50%;background:var(--period-event-paint,var(--period-event-color));transition:transform .1s}
.period-dot-button:hover .period-dot,.period-dot-button:focus-visible .period-dot{transform:scale(1.25)}
.period-dot-button:focus-visible{outline:2px solid var(--accent);outline-offset:-1px;background:var(--surface-soft)}
.period-dot-multi .period-dot{box-shadow:0 0 0 1px var(--surface),0 0 0 2px var(--period-event-color)}
.period-dot-group .period-dot{outline:1px dashed var(--period-event-color);outline-offset:3px}
.period-dot-block .period-dot{border-radius:2px;background:none;border:2px solid var(--period-event-color)}
.period-dot-room .period-dot{border-radius:1px;background:none;border:1px dashed var(--period-event-color);transform:rotate(45deg);width:8px;height:8px}
.period-dot-external .period-dot{background:none;border:1px dashed var(--period-event-color)}
.period-dot-room:hover .period-dot,.period-dot-room:focus-visible .period-dot{transform:rotate(45deg) scale(1.25)}
.period-dot-month .period-empty{padding:4px 0;font-size:10px}
.period-dot-month .period-open-day{min-height:28px;padding:4px 0;font-size:10px}
.period-dot-month .period-outside{background:var(--surface-soft)}
.period-dot-month .period-outside .period-dot{opacity:.65}
.period-dot-month .period-today .period-day-heading{background:var(--accent);color:var(--surface);border-radius:50%;width:27px;text-align:center;text-decoration:none}
@media(max-width:760px){.period-team-legend{padding:10px 12px;gap:6px 12px;font-size:10px}.period-time-week{min-width:1190px;--period-heading-height:112px}.period-dot-month{min-width:770px}.period-dot-month .period-day{padding:7px;min-height:150px}.period-dot-month .period-day-heading,.period-dot-month .period-open-day{min-height:36px}.period-dot-month .period-day-top{min-height:61px}.period-time-week .period-day-heading{min-height:43px}.period-dot-button{width:28px;height:28px;min-height:28px;flex-basis:28px}}
@media(pointer:coarse){.period-dot-button{width:28px;height:28px;min-height:28px;flex-basis:28px}.period-team-legend{row-gap:9px}}
@media(prefers-reduced-motion:reduce){.period-dot{transition:none}}
.period-dot-month .period-day-top{min-height:32px}
.period-dot-month .period-day-title{justify-content:flex-start;gap:4px}
.period-dot-month .period-day-title>.period-day-heading{flex-shrink:0}
.period-dot-month .period-day-title>.period-open-day{margin:0;padding:4px 0;min-width:35px;text-align:left;white-space:nowrap}
.period-dot-month .period-day-title>.period-count{margin-left:auto}
@media(max-width:760px){.period-dot-month .period-day-top{min-height:36px}.period-dot-month .period-day-title>.period-open-day{min-height:36px}}