.content:has(.schedule-page) {
 overflow: hidden;
}

.schedule-page {
 --page-title-size: 1.35rem;
 position: relative;
 display: flex;
 flex-direction: column;
 flex: 1;
 min-height: 0;
 width: 100%;
 height: 100%;
 background: var(--background);
}

.schedule-header {
 position: relative;
 flex-shrink: 0;
 padding-top: calc(
  8px + 36px + 8px +
   env(safe-area-inset-top, 0px)
 );
}

.schedule-toolbar {
 display: flex;
 align-items: center;
 gap: 12px;
 flex-wrap: wrap;
 padding: 12px 20px;
 border-bottom: 1px solid var(--border);
 background: var(--background);
}

.schedule-nav {
 display: flex;
 align-items: center;
 gap: 4px;
 min-width: 0;
}

.schedule-title-btn {
 font-size: var(--page-title-size);
 font-weight: 600;
 padding-inline: 8px;
}

.schedule-title-btn[hidden] {
 display: none;
}

.schedule-views {
 display: flex;
 flex-wrap: wrap;
 gap: 2px;
 padding: 2px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--muted);
}

.schedule-view-btn.active,
.schedule-view-btn[aria-selected='true'] {
 background: var(--background);
 box-shadow: 0 0 0 1px var(--border);
}

.schedule-toolbar > .btn-default {
 margin-left: auto;
}

.schedule-picker {
 position: absolute;
 z-index: 4;
 top: calc(100% + 8px);
 left: 20px;
 width: min(320px, calc(100% - 40px));
 padding: 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-lg);
 background: var(--popover);
 box-shadow: 0 12px 40px #00000022;
}

.schedule-agenda-range {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 8px;
}

.schedule-agenda-range[hidden] {
 display: none;
}

.schedule-agenda-date {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: var(--text-sm);
 font-weight: 600;
}

.schedule-agenda-date .input {
 width: auto;
 min-width: 10.5rem;
}

.schedule-picker-head {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 8px;
}

.schedule-picker-label {
 flex: 1;
 text-align: center;
 font-weight: 600;
}

.schedule-picker-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 2px;
}

.schedule-picker-dow,
.schedule-picker-day {
 text-align: center;
 font-size: var(--text-xs);
}

.schedule-picker-dow {
 color: var(--muted-foreground);
 padding: 4px 0;
}

.schedule-picker-day {
 border: 0;
 background: transparent;
 color: inherit;
 border-radius: 999px;
 height: 32px;
 cursor: pointer;
}

.schedule-picker-day:hover {
 background: var(--accent);
}

.schedule-picker-day.today {
 box-shadow: inset 0 0 0 1px
  var(--primary);
}

.schedule-picker-day.selected {
 background: var(--primary);
 color: var(--primary-foreground);
}

.schedule-picker-jump {
 display: flex;
 flex-direction: column;
 gap: 4px;
 margin-top: 10px;
 font-size: var(--text-sm);
}

.schedule-body {
 flex: 1;
 min-height: 0;
 overflow: auto;
}

.schedule-skel,
.schedule-empty {
 padding: 32px 24px;
}

.schedule-month {
 display: flex;
 flex-direction: column;
 min-height: 100%;
}

.schedule-month-head,
.schedule-month-grid {
 display: grid;
 grid-template-columns: repeat(
  7,
  minmax(0, 1fr)
 );
}

.schedule-dow {
 padding: 8px 10px;
 font-size: var(--text-xs);
 color: var(--muted-foreground);
 border-bottom: 1px solid var(--border);
}

.schedule-month-cell {
 position: relative;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 2px;
 min-height: 110px;
 padding: 6px;
 border: 0;
 border-right: 1px solid var(--border);
 border-bottom: 1px solid var(--border);
 background: var(--background);
 color: inherit;
 text-align: left;
 cursor: pointer;
}

.schedule-month-cell.outside {
 background: var(--muted);
 color: var(--muted-foreground);
}

.schedule-month-cell.today
 .schedule-month-num {
 background: var(--primary);
 color: var(--primary-foreground);
}

.schedule-month-num {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 24px;
 height: 24px;
 border-radius: 999px;
 font-size: var(--text-sm);
 font-weight: 600;
}

.schedule-more {
 font-size: var(--text-xs);
 color: var(--muted-foreground);
 padding-left: 4px;
}

.schedule-event {
 display: flex;
 align-items: center;
 gap: 6px;
 width: 100%;
 border: 0;
 border-radius: 4px;
 padding: 2px 6px;
 background: color-mix(
  in srgb,
  var(--primary) 18%,
  transparent
 );
 color: var(--foreground);
 font-size: var(--text-xs);
 cursor: pointer;
 overflow: hidden;
}

.schedule-event.compact {
 white-space: nowrap;
}

.schedule-event.absolute {
 position: absolute;
 left: 4px;
 right: 4px;
 width: auto;
 align-items: flex-start;
 padding: 4px 6px;
}

.schedule-event.done {
 opacity: 0.72;
}

.schedule-event.is-workflow {
 background: color-mix(
  in srgb,
  var(--message-success) 24%,
  transparent
 );
}

.schedule-type {
 display: flex;
 gap: 8px;
}

.schedule-type .btn {
 flex: 1;
}

.schedule-check {
 display: flex;
 align-items: center;
 gap: 8px;
}

.schedule-event-time {
 font-weight: 600;
 flex-shrink: 0;
}

.schedule-event-title {
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
}

.schedule-event-chat {
 width: 6px;
 height: 6px;
 border-radius: 999px;
 background: var(--message-success);
 flex-shrink: 0;
}

.schedule-timegrid {
 display: flex;
 flex-direction: column;
 min-height: 100%;
}

.schedule-timegrid-head {
 display: grid;
 position: sticky;
 top: 0;
 z-index: 2;
 background: var(--background);
 border-bottom: 1px solid var(--border);
}

.schedule-timegrid-day {
 padding: 10px 8px 8px;
 text-align: center;
}

.schedule-timegrid-dow {
 font-size: var(--text-xs);
 color: var(--muted-foreground);
}

.schedule-timegrid-date {
 font-size: 1.25rem;
 font-weight: 600;
}

.schedule-timegrid-day.today
 .schedule-timegrid-date {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 32px;
 height: 32px;
 border-radius: 999px;
 background: var(--primary);
 color: var(--primary-foreground);
}

.schedule-timegrid-body {
 display: grid;
 min-height: calc(24 * 48px);
}

.schedule-hours,
.schedule-day-col {
 position: relative;
}

.schedule-hour-label,
.schedule-hour-slot {
 height: 48px;
 box-sizing: border-box;
}

.schedule-hour-label {
 padding: 0 8px;
 font-size: var(--text-xs);
 color: var(--muted-foreground);
 transform: translateY(-7px);
}

.schedule-hour-slot {
 border-top: 1px solid var(--border);
}

.schedule-day-col {
 border-left: 1px solid var(--border);
 cursor: pointer;
}

.schedule-day-col.today {
 background: color-mix(
  in srgb,
  var(--primary) 5%,
  transparent
 );
}

.schedule-now {
 position: absolute;
 left: 0;
 right: 0;
 height: 2px;
 background: var(--destructive);
 pointer-events: none;
}

.schedule-now::before {
 content: '';
 position: absolute;
 left: -5px;
 top: -4px;
 width: 10px;
 height: 10px;
 border-radius: 999px;
 background: var(--destructive);
}

.schedule-agenda {
 padding: 16px 24px 40px;
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.schedule-agenda-day h2 {
 margin: 0 0 8px;
 font-size: var(--text-base);
}

.schedule-agenda-row {
 display: grid;
 grid-template-columns:
  88px minmax(0, 1fr)
  auto auto;
 gap: 12px;
 align-items: center;
 width: 100%;
 padding: 10px 12px;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 background: var(--background);
 color: inherit;
 text-align: left;
 cursor: pointer;
}

.schedule-agenda-row
 + .schedule-agenda-row {
 margin-top: 6px;
}

.schedule-agenda-time {
 font-weight: 600;
 font-size: var(--text-sm);
}

.schedule-agenda-title {
 font-weight: 600;
}

.schedule-agenda-open {
 font-size: var(--text-sm);
 color: var(--primary);
}

.dialog.schedule-event-dialog {
 max-width: 36rem;
}

.schedule-dialog {
 max-width: 36rem;
}

.schedule-dialog .chats-composer {
 margin: 0;
}

.schedule-people {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 8px;
}

.schedule-people-empty {
 margin: 0;
 flex: 1 1 100%;
}

.schedule-person {
 display: inline-flex;
 align-items: center;
 gap: 4px;
 font-size: var(--text-xs);
 color: var(--muted-foreground);
 background: var(--muted);
 border-radius: 999px;
 padding: 2px 6px 2px 8px;
}

.schedule-person-remove {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 border: 0;
 background: transparent;
 color: inherit;
 cursor: pointer;
}

.schedule-field {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.schedule-field-label {
 font-size: var(--text-sm);
 font-weight: 600;
}

.schedule-when {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
}

.schedule-weekdays {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
}

.schedule-weekdays[hidden] {
 display: none;
}

.schedule-weekday {
 display: flex;
 align-items: center;
 gap: 4px;
 font-size: var(--text-sm);
}

.schedule-select {
 width: 100%;
}

.schedule-dialog-error {
 color: var(--destructive);
 font-size: var(--text-sm);
 min-height: 1.2em;
}

.schedule-dialog-footer {
 justify-content: flex-end;
 flex-wrap: wrap;
 gap: 8px;
}

@media (max-width: 720px) {
 .schedule-header {
  padding-top: calc(
   8px + 36px + 8px +
    env(safe-area-inset-top, 0px)
  );
 }
 .schedule-toolbar {
  padding: 12px;
 }
 .schedule-toolbar > .btn-default {
  margin-left: 0;
 }
 .schedule-month-cell {
  min-height: 84px;
 }
 .schedule-agenda-row {
  grid-template-columns: 72px minmax(
    0,
    1fr
   );
 }
}