.calendar-shell{
  width:100%;
  min-width:0;
  color:#17202d;
  --calendar-border:#e3e8ec;
  --calendar-border-soft:#edf1f3;
  --calendar-muted:#707b88;
  --calendar-orange:#ff5a00;
}
.calendar-page-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px;
}
.calendar-page-header h1{
  margin:3px 0 6px;
  font-size:30px;
  line-height:1.1;
  letter-spacing:0;
}
.calendar-page-header p{
  margin:0;
  color:var(--calendar-muted);
  font-size:14.5px;
  line-height:1.5;
}
.calendar-eyebrow{
  display:block;
  color:var(--calendar-orange);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.calendar-button,
.calendar-icon-button{
  min-height:42px;
  border:1px solid var(--calendar-border);
  border-radius:8px;
  background:#fff;
  color:#27313f;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:0 15px;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.calendar-button:hover,
.calendar-icon-button:hover{border-color:#ff9e6b;background:#fffaf7;transform:translateY(-1px)}
.calendar-button:focus-visible,
.calendar-icon-button:focus-visible,
.calendar-view-switch button:focus-visible,
.calendar-event:focus-visible,
.calendar-day-number:focus-visible,
.calendar-time-slot:focus-visible{outline:3px solid rgba(255,90,0,.18);outline-offset:2px}
.calendar-button.primary{border-color:var(--calendar-orange);background:var(--calendar-orange);color:#fff;box-shadow:0 7px 18px rgba(255,90,0,.16)}
.calendar-button.primary:hover{border-color:#e94f00;background:#e94f00}
.calendar-button.danger{border-color:#efc5c5;background:#fff;color:#b52f2f}
.calendar-button:disabled,.calendar-icon-button:disabled{opacity:.55;cursor:not-allowed;transform:none}
.calendar-button svg,.calendar-icon-button svg{width:17px;height:17px;flex:0 0 auto;stroke-linecap:round;stroke-linejoin:round}
.calendar-icon-button{width:42px;padding:0}
.calendar-toolbar{
  min-height:72px;
  border:1px solid var(--calendar-border);
  border-bottom:0;
  border-radius:8px 8px 0 0;
  background:#fff;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:14px 16px;
}
.calendar-toolbar h2{
  margin:0;
  color:#17202d;
  font-size:19px;
  line-height:1.25;
  font-weight:850;
  text-align:center;
  text-transform:capitalize;
  white-space:nowrap;
}
.calendar-navigation{display:flex;align-items:center;gap:7px;justify-self:start}
.calendar-view-switch{
  justify-self:end;
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:3px;
  padding:3px;
  border:1px solid var(--calendar-border);
  border-radius:8px;
  background:#f6f8f9;
}
.calendar-view-switch button{
  height:34px;
  border:0;
  border-radius:6px;
  padding:0 13px;
  background:transparent;
  color:#65717f;
  font:inherit;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}
.calendar-view-switch button.active{background:#fff;color:#17202d;box-shadow:0 1px 4px rgba(25,34,45,.1)}
.calendar-status{
  border:1px solid var(--calendar-border);
  border-bottom:0;
  background:#fff8f3;
  color:#b34816;
  padding:10px 16px;
  font-size:12px;
  font-weight:800;
}
.calendar-status[hidden]{display:none}
.calendar-status.error{background:#fff5f5;color:#b72d2d}
.calendar-canvas{
  min-height:620px;
  border:1px solid var(--calendar-border);
  border-radius:0 0 8px 8px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(30,40,52,.04);
  transition:opacity .16s ease;
}
.calendar-canvas.is-loading{opacity:.58;pointer-events:none}
.calendar-month-scroll,.calendar-timeline-scroll{width:100%;overflow:auto;overscroll-behavior:contain}
.calendar-month-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(132px,1fr));
  min-width:924px;
}
.calendar-weekday{
  min-height:42px;
  border-right:1px solid var(--calendar-border-soft);
  border-bottom:1px solid var(--calendar-border);
  display:flex;
  align-items:center;
  padding:0 12px;
  color:#707a87;
  background:#f8fafb;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}
.calendar-weekday:nth-child(7){border-right:0}
.calendar-day{
  min-height:130px;
  border-right:1px solid var(--calendar-border-soft);
  border-bottom:1px solid var(--calendar-border-soft);
  padding:8px;
  background:#fff;
  overflow:hidden;
}
.calendar-day:nth-child(7n + 7){border-right:0}
.calendar-day.is-muted{background:#fbfcfc}
.calendar-day.is-muted .calendar-day-number{color:#aab2bb}
.calendar-day.is-today{background:#fffaf7}
.calendar-day-number{
  width:28px;
  height:28px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0 0 5px auto;
  background:transparent;
  color:#3d4855;
  font:inherit;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
}
.calendar-day.is-today .calendar-day-number{background:var(--calendar-orange);color:#fff}
.calendar-day-events{display:grid;gap:4px;min-width:0}
.calendar-event{
  width:100%;
  min-width:0;
  min-height:30px;
  border:0;
  border-left:3px solid var(--event-color,var(--calendar-orange));
  border-radius:5px;
  background:color-mix(in srgb,var(--event-color,var(--calendar-orange)) 10%,#fff);
  color:#25303c;
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  text-align:left;
  font:inherit;
  font-size:11px;
  line-height:1.25;
  font-weight:800;
  cursor:pointer;
  overflow:hidden;
}
.calendar-event:hover{filter:saturate(1.08);box-shadow:0 2px 8px rgba(24,33,45,.08)}
.calendar-event time{color:var(--event-color,var(--calendar-orange));font-size:10px;flex:0 0 auto}
.calendar-event span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-event.compact{min-height:25px;padding:4px 6px}
.calendar-more{
  border:0;
  background:transparent;
  color:#596574;
  padding:3px 6px;
  text-align:left;
  font:inherit;
  font-size:10px;
  font-weight:850;
  cursor:pointer;
}
.calendar-more:hover{color:var(--calendar-orange)}
.calendar-empty{
  min-height:620px;
  display:grid;
  place-content:center;
  gap:6px;
  padding:30px;
  text-align:center;
  color:#737e8b;
}
.calendar-empty strong{color:#17202d;font-size:18px}
.calendar-timeline{display:grid;grid-template-columns:68px minmax(840px,1fr);grid-template-rows:auto auto 1440px;min-width:908px}
.calendar-timeline-corner,.calendar-all-day-label{border-right:1px solid var(--calendar-border);border-bottom:1px solid var(--calendar-border);background:#f8fafb}
.calendar-timeline-heads,.calendar-all-day-row,.calendar-time-columns{display:grid;grid-template-columns:repeat(var(--calendar-days),minmax(120px,1fr))}
.calendar-timeline-day-head{
  min-height:66px;
  border:0;
  border-right:1px solid var(--calendar-border-soft);
  border-bottom:1px solid var(--calendar-border);
  background:#fff;
  color:#65717e;
  display:grid;
  place-content:center;
  gap:3px;
  font:inherit;
  cursor:pointer;
}
.calendar-timeline-day-head span{font-size:10px;font-weight:900;text-transform:uppercase}
.calendar-timeline-day-head strong{font-size:18px;color:#26313e}
.calendar-timeline-day-head.is-today strong{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--calendar-orange);color:#fff}
.calendar-all-day-label{display:flex;align-items:center;justify-content:center;color:#7b8590;font-size:9px;font-weight:900;text-transform:uppercase;padding:8px}
.calendar-all-day-cell{min-height:42px;border-right:1px solid var(--calendar-border-soft);border-bottom:1px solid var(--calendar-border);padding:5px;display:grid;align-content:start;gap:3px}
.calendar-hours{height:1440px;display:grid;grid-template-rows:repeat(24,60px);background:#f8fafb;border-right:1px solid var(--calendar-border)}
.calendar-hour-label{height:60px;border-bottom:1px solid var(--calendar-border-soft);display:flex;align-items:flex-start;justify-content:flex-end;padding:5px 9px;color:#8a939e;font-size:9px;font-weight:800}
.calendar-time-columns{height:1440px}
.calendar-time-column{position:relative;height:1440px;border-right:1px solid var(--calendar-border-soft);overflow:hidden}
.calendar-time-slot{display:block;width:100%;height:60px;border:0;border-bottom:1px solid var(--calendar-border-soft);background:#fff;cursor:pointer}
.calendar-time-slot:hover{background:#fffaf7}
.calendar-event.timeline{position:absolute;z-index:2;top:var(--event-top);left:4px;width:calc(100% - 8px);height:var(--event-height);min-height:30px;align-items:flex-start;flex-direction:column;gap:2px;padding:6px;overflow:hidden}
.calendar-overlay{
  position:fixed;
  z-index:10050;
  inset:0;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(19,27,37,.44);
  backdrop-filter:blur(4px);
}
.calendar-overlay[hidden]{display:none!important}
body.calendar-modal-open{overflow:hidden}
.calendar-modal{
  width:min(680px,100%);
  max-height:min(820px,calc(100vh - 48px));
  border:1px solid rgba(220,226,231,.9);
  border-radius:8px;
  background:#fff;
  box-shadow:0 24px 70px rgba(17,25,35,.22);
  overflow:auto;
}
.calendar-modal-head{
  position:sticky;
  z-index:2;
  top:0;
  min-height:76px;
  border-bottom:1px solid var(--calendar-border-soft);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 20px;
}
.calendar-modal-head h2{margin:3px 0 0;font-size:21px;letter-spacing:0}
.calendar-modal-body{padding:20px;display:grid;gap:17px}
.calendar-field{display:grid;gap:7px;min-width:0}
.calendar-field > span,.calendar-colors legend{color:#45505e;font-size:12px;font-weight:850}
.calendar-field input,.calendar-field textarea{
  width:100%;
  min-height:46px;
  border:1px solid #dfe4e8;
  border-radius:7px;
  background:#fff;
  color:#17202d;
  padding:10px 12px;
  font:inherit;
  font-size:14px;
  line-height:1.4;
  resize:vertical;
}
.calendar-field input:focus,.calendar-field textarea:focus{outline:3px solid rgba(255,90,0,.13);border-color:#ff965f}
.calendar-check{display:flex;align-items:center;gap:9px;color:#3e4956;font-size:13px;font-weight:800;cursor:pointer}
.calendar-check input{width:18px;height:18px;accent-color:var(--calendar-orange)}
.calendar-form-grid{display:grid;grid-template-columns:1fr .7fr 1fr .7fr;gap:12px}
.calendar-time-field[hidden]{display:none}
.calendar-colors{border:0;margin:0;padding:0;display:grid;gap:10px}
.calendar-colors > div{display:flex;flex-wrap:wrap;gap:9px}
.calendar-colors button{
  width:29px;
  height:29px;
  border:3px solid #fff;
  border-radius:50%;
  background:var(--swatch);
  box-shadow:0 0 0 1px #dce2e7;
  cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease;
}
.calendar-colors button:hover{transform:scale(1.08)}
.calendar-colors button.active{box-shadow:0 0 0 2px #17202d}
.calendar-colors button:focus-visible{outline:3px solid rgba(255,90,0,.18);outline-offset:3px}
.calendar-colors button:disabled{cursor:default;opacity:.7;transform:none}
.calendar-event-meta{margin:0;color:#7a8490;font-size:11px;line-height:1.5}
.calendar-modal-actions{
  min-height:72px;
  border-top:1px solid var(--calendar-border-soft);
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:9px;
  padding:14px 20px;
  background:#fbfcfc;
}
@supports not (background:color-mix(in srgb,#fff 10%,#fff)){
  .calendar-event{background:#fff4ee}
}
@media (max-width:900px){
  .calendar-page-header{align-items:flex-start}
  .calendar-toolbar{grid-template-columns:1fr auto;gap:12px}
  .calendar-toolbar h2{grid-column:1/-1;grid-row:1;text-align:left}
  .calendar-navigation{grid-column:1;grid-row:2}
  .calendar-view-switch{grid-column:2;grid-row:2}
}
@media (max-width:640px){
  .calendar-page-header{display:grid;gap:14px}
  .calendar-page-header .calendar-button.primary{width:100%}
  .calendar-toolbar{padding:12px;display:flex;flex-wrap:wrap;justify-content:space-between}
  .calendar-toolbar h2{order:-1;width:100%;text-align:left;font-size:17px}
  .calendar-view-switch{width:100%;grid-template-columns:repeat(3,1fr)}
  .calendar-view-switch button{padding:0 8px}
  .calendar-form-grid{grid-template-columns:1fr 1fr}
  .calendar-overlay{padding:10px}
  .calendar-modal{max-height:calc(100vh - 20px)}
  .calendar-modal-actions{grid-template-columns:1fr 1fr}
  .calendar-modal-actions > span{display:none}
  .calendar-modal-actions .danger{grid-column:1/-1;grid-row:2}
}