/* Loaded after the legacy layout so the Terminplaner toolbar cannot jump back. */
.appointment-page .appointment-toolbar{display:flex;flex-wrap:wrap;grid-template-areas:none;gap:10px;align-items:start}
.appointment-page .appointment-toolbar>.appointment-week-context{flex:0 1 200px}
.appointment-page .appointment-toolbar>.appointment-date-field{flex:0 1 180px;min-width:0}
.appointment-page .appointment-week-context{grid-area:auto;min-width:0;display:grid;gap:4px;align-content:center}
.appointment-page .appointment-week-overview,.appointment-page .appointment-week-main,.appointment-page .appointment-week-totals{min-width:0;display:flex;align-items:center;gap:6px}
.appointment-page .appointment-week-overview strong{margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.appointment-page .appointment-week-totals span{padding:3px 6px;border-radius:999px;color:#52617a;background:#eef4fa;font-size:9px;white-space:nowrap}
.appointment-page .appointment-week-totals span b{color:#173b76}
.appointment-page .appointment-nav-button{display:inline-grid;place-items:center;min-width:36px;height:36px;padding:0 10px;border:1px solid #b9c9da;border-radius:9px;background:#fff;color:#17304f;box-shadow:0 2px 6px rgba(24,32,51,.09);font:800 15px/1 inherit;cursor:pointer}
.appointment-page .appointment-week-main .appointment-today-button{min-width:68px;height:36px;border-radius:9px;font-size:11px}
.appointment-page .appointment-week-main .appointment-history-toggle{width:auto;min-height:36px}
.global-calendar-zoom{display:inline-grid;grid-template-columns:36px 56px 36px;align-items:center;overflow:hidden;border:1px solid #bdcbd9;border-radius:9px;background:#fff}
.global-calendar-zoom button{min-height:36px;border:0;border-radius:0;background:#edf5fc;color:#173b76;font-size:20px;font-weight:900;cursor:pointer}
.global-calendar-zoom span{text-align:center;color:#52617a;font-size:10px;font-weight:850}
html:not([data-ready-view="appointments"]) .global-calendar-zoom{display:none}
.appointment-page .appointment-date-field{width:min(190px,100%)}
.appointment-page .appointment-date-field input{width:100%}
.appointment-page>.appointment-toolbar>.appointment-history-toggle{min-height:36px;margin-top:23px;align-self:start}
.appointment-page .appointment-toolbar-main{grid-area:auto;display:contents}
.appointment-page .appointment-toolbar-main>#appointment-instructor-picker{flex:0 1 190px;width:100%;min-width:0;align-self:start}
.appointment-page .appointment-toolbar-main>.appointment-view-toggle{flex:0 1 180px;align-self:start}
.appointment-page .appointment-view-toggle{display:grid;grid-template-columns:1fr;gap:3px}
.appointment-page .appointment-view-toggle>div{min-height:36px;grid-template-columns:minmax(72px,1fr) minmax(72px,1fr);gap:4px}
.appointment-page .appointment-view-toggle button{min-width:0;padding-inline:9px;font-size:10.5px;white-space:nowrap}
/* Wrap against the space left by the sidebar and selectors, not a viewport guess. */
.appointment-page .appointment-toolbar-actions{grid-area:auto;flex:1 1 360px;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:5px;margin-top:8px;align-self:start}
.appointment-page .appointment-toolbar-actions .button{flex:0 0 auto;max-width:100%}
/* Personal pin settings also govern the legacy toolbar's built-in sticky rule. */
body.ki-interface[data-ki-page="appointments"] .appointment-page>.appointment-toolbar:not(.ui-personal-sticky){position:relative!important;top:auto!important;z-index:auto!important}
/* An open teacher picker must also clear pinned panels when its toolbar is not pinned. */
body.ki-interface[data-ki-page="appointments"] .appointment-page>.appointment-toolbar:has(#appointment-instructor-picker[open]){z-index:65!important}
/* The legacy theme sets top even on a relative editor block. Reset it with
   enough specificity so the controls stay in their own document-flow space. */
body.ki-interface[data-ki-page="appointments"] .appointment-page[data-ui-editing] .ui-inline-block{position:relative!important;top:auto!important;z-index:auto!important;overflow:visible!important}
body.ki-interface[data-ki-page="appointments"] .appointment-page[data-ui-editing] .scheduler-card>.card-header{position:static!important;top:auto!important;z-index:auto!important}
/* Pin the actual student panel, including when demand loading nests it next to the calendar. */
body.ki-interface[data-ki-page="appointments"] .appointment-calendar-workspace>.appointment-pinned.ui-personal-sticky{position:sticky!important;top:var(--ui-sticky-offset,82px)!important;z-index:52!important;max-height:max(100px,calc(100dvh - var(--ui-sticky-offset,82px) - 160px));overflow:auto}
body.ki-interface[data-ki-page="appointments"] .appointment-page[data-ui-editing] .appointment-pinned{max-height:none!important}
body.ki-interface[data-ki-page="appointments"] .appointment-calendar-workspace.is-side:has(>.ui-personal-hidden){grid-template-columns:minmax(0,1fr)}
body.ki-interface[data-ki-page="appointments"] .appointment-calendar-workspace.is-side:has(>.ui-personal-hidden)>.appointment-pin-splitter{display:none}
@media(min-width:1100px){body.ki-interface[data-ki-page="appointments"] .appointment-calendar-workspace.is-side>.appointment-pinned.ui-personal-sticky{max-height:max(100px,calc(100dvh - var(--ui-sticky-offset,82px) - 16px))}}
@media(max-width:760px){
  .appointment-page .appointment-toolbar{display:grid;grid-template-columns:minmax(0,1fr)}
  .appointment-page .appointment-toolbar>.appointment-date-field{width:100%}
  .appointment-page>.appointment-toolbar>.appointment-history-toggle{margin-top:0}
  .appointment-page .appointment-toolbar-main{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr);gap:8px}
  .appointment-page .appointment-toolbar-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch;margin-top:0}
  .appointment-page .appointment-toolbar-actions .button{width:100%;min-width:0;white-space:normal}
}

/* The details summary uses a grid in normal mode. Its editor controls need
   a complete first row, like the other personalized planner sections. */
body.ki-interface[data-ki-page="appointments"] .appointment-page[data-ui-editing] .appointment-pinned>summary.ui-inline-summary{display:flex!important;flex-wrap:wrap!important;min-width:0}
body.ki-interface[data-ki-page="appointments"] .appointment-page[data-ui-editing] .appointment-pinned>summary.ui-inline-summary>.ui-inline-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;order:-1;flex:1 0 100%;width:100%;min-width:0}
body.ki-interface[data-ki-page="appointments"] .appointment-page[data-ui-editing] .appointment-pinned>summary.ui-inline-summary>div:not(.ui-inline-bar,.appointment-pin-collapsed-summary){flex:1 1 160px;min-width:0}
body.ki-interface[data-ki-page="appointments"] .appointment-page[data-ui-editing] .appointment-pinned>summary.ui-inline-summary>.appointment-pin-collapsed-summary{order:1;flex:1 0 100%}