.calendar-editor { min-width: 0; --calendar-name-width: 280px; }
.calendar-help { margin: .75rem 0; color: var(--muted); font-size: .84rem; max-width: 75ch; }
.calendar-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.calendar-tools button, .calendar-popover button:not(.medication-search-clear) { font: inherit; font-size: .84rem; cursor: pointer; min-height: 40px; padding: .5rem .75rem; color: var(--navy); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; }
.calendar-history { display: flex; gap: .5rem; margin-left: auto; }
.calendar-feedback { min-height: 1.5em; margin: .65rem 0; font-size: .84rem; color: var(--periwinkle); }
.calendar-canvas { overflow: auto; max-height: 62vh; border: 1px solid var(--line-strong); border-radius: 12px; scroll-padding: 70px var(--calendar-name-width); }
.calendar-canvas table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: .84rem; }
.calendar-canvas th, .calendar-canvas td { min-width: 138px; width: 138px; padding: .5rem; vertical-align: top; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calendar-canvas thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: .75rem; text-align: left; }
.calendar-canvas th:first-child { position: sticky; left: 0; min-width: var(--calendar-name-width); width: var(--calendar-name-width); max-width: var(--calendar-name-width); background: var(--surface); z-index: 3; text-align: left; }
.calendar-canvas thead th:first-child { z-index: 4; }
.calendar-canvas th small { display: block; margin-top: .3rem; color: var(--muted); font-weight: 400; }
.calendar-row-name { border: 0; padding: .5rem 0; background: transparent; font: inherit; font-weight: 700; color: var(--navy); text-align: left; overflow-wrap: anywhere; }
.calendar-medication-name { padding: .25rem; }
.calendar-medication-name .medication-package-name { display: block; margin-top: .5rem; }
@media (max-width: 600px) {
  .calendar-editor { --calendar-name-width: 180px; }
}
.calendar-required { display: block; color: #7a5412; background: #fff5de; padding: .3rem .5rem; margin-top: .5rem; border-radius: 8px; }
.calendar-occurrence { width: 100%; min-height: 64px; display: grid; gap: .3rem; border: 1px solid transparent; border-radius: 8px; padding: .65rem; background: var(--coral-soft); color: var(--coral-ink); text-align: left; cursor: grab; font: inherit; overflow-wrap: anywhere; margin-bottom: .35rem; }
.calendar-occurrence.medication { background: var(--navy); color: var(--surface); }
.calendar-occurrence small { font-size: .84rem; color: inherit; }
.calendar-occurrence.is-changed { position: relative; padding-right: 1rem; }
.calendar-change-marker { position: absolute; top: .45rem; right: .45rem; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.calendar-add-cell { display: block; width: 100%; min-height: 28px; border: 1px dashed var(--line-strong); border-radius: 8px; background: transparent; color: var(--periwinkle); font: inherit; cursor: pointer; }
.calendar-drop { background: var(--lilac-soft); outline: 2px solid var(--periwinkle); outline-offset: -2px; }
.calendar-empty { padding: 2rem; color: var(--muted); }
.calendar-popover { position: fixed; margin: 0; width: 400px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100vh - 32px)); overflow: auto; z-index: 20; padding: 1.25rem; border: 0; border-radius: 12px; box-shadow: 0 20px 54px rgba(30,36,66,.2); color: var(--navy); background: var(--surface); }
.calendar-popover header { display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: 1rem; }
.calendar-popover h3 { font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.5; }
.calendar-popover fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .75rem; min-width: 0; }
.calendar-popover label { display: grid; gap: .35rem; font-size: .84rem; font-weight: 600; }
.calendar-popover input, .calendar-popover select, .calendar-popover textarea { width: 100%; min-width: 0; }
.calendar-popover textarea { min-height: 65px; resize: vertical; }
.calendar-popover footer { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }
.calendar-popover .calendar-apply { background: var(--navy); color: var(--surface); }
.calendar-inline-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--line); }
.calendar-scope-note, .calendar-change-entry p { font-size: .84rem; color: var(--muted); line-height: 1.5; }
.calendar-change-entry { border-bottom: 1px solid var(--line); padding-bottom: .75rem; overflow-wrap: anywhere; }
.calendar-error { color: #7a5412; background: #fff5de; padding: .75rem; font-size: .84rem; }
@media (hover: hover) and (pointer: fine) {
  .calendar-editor button:not(.medication-search-clear):hover { filter: brightness(.96); }
}
.calendar-editor button:not(.medication-search-clear):focus-visible, .calendar-canvas:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 2px; }
.calendar-editor button:disabled { opacity: .5; cursor: not-allowed; }
.calendar-editor [hidden] { display: none !important; }

.calendar-new-row th { font-weight: 500; }
.calendar-remove-row { display: block; margin-top: .5rem; padding: .4rem .5rem; min-height: 44px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--coral-ink); font: inherit; font-size: .8rem; text-align: left; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .calendar-editor button.calendar-remove-row:hover { background: var(--coral-soft); border-color: var(--coral); color: var(--coral-ink); filter: none; }
}
.calendar-editor .calendar-remove-row:focus-visible { outline: 3px solid var(--periwinkle); outline-offset: 2px; }
.calendar-new-row .calendar-add-cell { min-height: 44px; }

.calendar-popover .calendar-checkbox { display: flex; align-items: center; gap: .75rem; font-weight: 400; }
.calendar-popover .calendar-checkbox input { width: auto; order: -1; }

.calendar-dose-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.calendar-medication-timings > div { display: grid; gap: .75rem; }
.calendar-medication-timings .calendar-dose-fields { grid-template-columns: minmax(0, 1fr); }
.calendar-medication-timings label[hidden] { display: none; }

/* The editor uses the patient timeline's grid, row labels and dose/care cells. */
.calendar-editor.protocol-calendar { --calendar-month-height: 0px; --calendar-label-width: 180px; --calendar-day-width: 100px; }
.calendar-grid-row { display: contents; }
.calendar-editor-canvas { max-height: 65vh; scroll-padding: 70px var(--calendar-label-width); scrollbar-color: var(--line-strong) var(--surface); }
.calendar-editor .calendar-row-name { padding-block: .25rem; }
.calendar-editor .calendar-row-label { padding-inline: .65rem; }
.calendar-editor .calendar-cell { align-content: stretch; }
.calendar-editor .calendar-occurrence { margin: 0; border-radius: 6px; min-height: 72px; text-align: center; justify-items: center; padding: .65rem .3rem; cursor: pointer; }
.calendar-editor .calendar-occurrence strong { font-family: var(--font-sans); font-size: .84rem; }
.calendar-editor .calendar-occurrence small { font-family: var(--font-sans); font-size: .68rem; line-height: 1.4; }
.calendar-editor .calendar-dose-entry small { color: var(--surface); }
.calendar-editor .calendar-remove-row { margin-top: .25rem; font-size: .68rem; }
.calendar-editor .calendar-axis-label { font-family: var(--font-sans); font-size: .84rem; letter-spacing: 0; text-transform: none; }
.calendar-editor .calendar-date strong { font-family: var(--font-sans); font-size: .84rem; font-variant-numeric: tabular-nums; }
.calendar-editor .calendar-new-row .calendar-row-label { font-size: .84rem; }
.calendar-editor .calendar-popover fieldset:disabled { opacity: 1; }
@media (max-width: 700px) {
  .calendar-editor.protocol-calendar { --calendar-label-width: 140px; }
  .calendar-history { flex-wrap: wrap; margin-left: 0; }
}

.calendar-editor button[data-drag-bound="true"] { cursor: grab; touch-action: none; user-select: none; }
.calendar-editor button.is-dragging { cursor: grabbing; opacity: .55; }

.calendar-row-label .calendar-row-error, .calendar-field-error { color: var(--coral-ink); font-family: var(--font-sans); font-size: .84rem; font-weight: 400; }
.calendar-popover footer:has([data-action-error]) { flex-wrap: wrap; }
.calendar-popover [data-action-error] { flex-basis: 100%; margin: 0; }