#appointmentPanel{--appointment-command:calc(150px * var(--ui-text-scale,1));--appointment-control-height:calc(46px * var(--ui-text-scale,1))}
#appointmentPanel .appointment-toolbar,#appointmentPanel .appointment-groups{max-width:1040px;width:100%;box-sizing:border-box}
#appointmentPanel .appointment-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
html[data-ui-theme] #appointmentPanel .search-control{flex:1 1 260px;max-width:none;min-width:0;height:auto;padding:0;border:0;background:transparent;box-shadow:none;outline:none;border-radius:0}
#appointmentPanel .search-control svg{position:static;width:20px;height:20px;flex:0 0 20px;margin:0}
html[data-ui-theme] #appointmentPanel .search-control input{box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--line,#bacbd2);border-radius:6px;background:var(--select-surface,#fff);color:var(--select-ink,#27404d);font:inherit;min-width:0}
html[data-ui-theme] #appointmentPanel :is(.search-control input,#appointmentGroupFilter):focus{background:var(--interaction-fill,#e2f3ed);border-color:var(--field-focus,#159b82);box-shadow:none;outline:2px solid var(--field-focus,#159b82);outline-offset:-2px}
@media(hover:hover){html[data-ui-theme] #appointmentPanel :is(.search-control input,#appointmentGroupFilter):hover{background:var(--row-feedback,#f2f6f4);border-color:var(--field-focus,#159b82);box-shadow:none}}
html[data-ui-theme] #appointmentPanel #appointmentSearch:is(:hover,:focus,:active){background:var(--select-surface,#fff)}
#appointmentPanel #createAppointment{box-sizing:border-box;flex:0 0 var(--appointment-command);width:var(--appointment-command);min-width:var(--appointment-command);height:var(--appointment-control-height);margin-left:auto}
#appointmentPanel .appointment-groups{flex-wrap:nowrap}
#appointmentPanel .appointment-groups label{flex:1 1 100px}
#appointmentPanel .appointment-groups .icon-button{flex:0 0 44px}
#appointmentCount{box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex:0 0 var(--appointment-command);width:var(--appointment-command);height:var(--appointment-control-height);padding:8px;text-align:center;white-space:nowrap;border:1px solid var(--line,#bacbd2);border-radius:6px;background:var(--select-surface,#fff);color:var(--select-ink,#27404d);font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){#appointmentCount{transition:background-color 140ms ease,border-color 140ms ease}#appointmentCount:hover{background:var(--row-feedback,#f2f6f4);border-color:var(--field-focus,#159b82)}}
@media(prefers-reduced-motion:reduce){#appointmentCount{transition:none}}
@media(max-width:620px){
 #appointmentPanel .appointment-controls{display:grid;grid-template-columns:44px minmax(0,1fr) max-content;gap:10px;width:100%;min-width:0;max-width:100%;margin-bottom:14px}
 #appointmentPanel :is(.appointment-toolbar,.appointment-groups){display:contents}
 #appointmentPanel #createAppointment{grid-column:1/-1;grid-row:1;width:100%;min-width:0;margin:0}
 html[data-ui-theme] #appointmentPanel .search-control{grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:8px;min-height:44px;margin:0;flex:none}
 #appointmentPanel .search-control input{width:100%}
 #appointmentPanel .appointment-groups label{grid-column:1/-1;grid-row:3;margin:0}
 #appointmentPanel #createAppointmentGroup{grid-column:1;grid-row:4}
 #appointmentPanel #appointmentFilter{grid-column:2;grid-row:4;width:100%;min-width:0;min-height:44px;margin:0;padding:8px;font:inherit;box-sizing:border-box}
 #appointmentPanel #appointmentCount{grid-column:3;grid-row:4;width:auto;min-width:0;height:44px;margin:0;font-size:calc(13px * var(--ui-text-scale,1))}
 #appointmentPanel #addAppointmentToGroup{grid-column:1;grid-row:5}
 #appointmentPanel #deleteAppointmentGroup{grid-column:2;grid-row:5;justify-self:start}
 #appointmentPanel #appointmentExpertFilter{grid-column:1/-1;grid-row:6;width:100%;min-width:0;min-height:44px}
 #appointmentPanel .appointment-controls [hidden]{display:none!important}
}
@media(max-width:900px){
 html[data-ui-theme] #appointmentPanel .search-control input{font-size:max(16px,1em);flex:1 1 0;max-width:100%}
 #appointmentPanel,#appointmentPanel .appointment-list,#appointmentPanel .appointment-row,#appointmentPanel .appointment-row>*{min-width:0;max-width:100%;box-sizing:border-box}
 #appointmentPanel .appointment-time{overflow-wrap:anywhere}
 #appointmentPanel .appointment-actions button{min-width:0;white-space:normal;overflow-wrap:anywhere}
 #appointmentPanel .appointment-groups select{flex:1;min-width:0;width:0}
 #appointmentDateDialog{box-sizing:border-box;min-width:0;max-width:calc(100% - 24px)}
 #appointmentDateForm,#appointmentDateForm .appointment-fields{min-width:0;max-width:100%}
 #appointmentDateForm .appointment-fields{margin:0;grid-template-columns:minmax(0,1fr);overflow-x:hidden}
 #appointmentDateForm label{grid-template-columns:minmax(0,1fr)}
 #appointmentDateForm input{box-sizing:border-box;display:block;width:100%;min-width:0;min-inline-size:0;max-width:100%;appearance:none;-webkit-appearance:none;font-size:max(16px,1em)}
 #appointmentDateForm input::-webkit-date-and-time-value{min-width:0;white-space:normal}
 #appointmentDateForm input::-webkit-datetime-edit{min-width:0;padding:0}
 #appointmentDateForm header{min-width:0;gap:8px}
 #appointmentDateForm header h2{min-width:0;overflow-wrap:anywhere}
 #appointmentDateForm header button{flex-shrink:0}
 #appointmentDateForm footer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
 #appointmentDateForm footer button{min-width:0;white-space:normal;overflow-wrap:anywhere}
}
#appointmentForm .appointment-fields{align-items:start}
#appointmentForm .appointment-fields>label{align-content:start}
#appointmentForm :is(input:not([type=range]),select){box-sizing:border-box;height:44px;min-height:44px;align-self:start}
#appointmentAssigneeLabel{grid-column:1/-1}
.appointment-date-control{display:grid;gap:8px;align-content:start;grid-row:span 2;font-size:calc(17px * var(--ui-text-scale,1));font-weight:600}
#appointmentDateOpen{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;margin:0;padding:10px 12px;text-align:left;white-space:normal;font:inherit;background:var(--select-surface,#fff);color:var(--select-ink,#27404d);border:1px solid var(--line,#bacbd2)}
#appointmentDateOpen svg{width:20px;height:20px;flex-shrink:0}
.appointment-vehicle{display:grid;gap:8px;min-width:0;font-size:calc(17px * var(--ui-text-scale,1));font-weight:600}
.appointment-vehicle>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
#appointmentForm .appointment-address-navigation{display:flex;align-items:center;gap:8px;height:28px;min-width:0}
#appointmentForm .appointment-address-navigation button{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;min-height:28px;padding:0;border:1px solid #b9cbd4;border-radius:4px;background:transparent;color:inherit;cursor:pointer}
.appointment-address-navigation svg{width:18px;height:18px}
#appointmentForm #appointmentAddressScroll{flex:1;min-width:0;width:100%;height:24px;min-height:24px;padding:0;border:0;box-shadow:none;background:transparent;accent-color:#079b85}
#appointmentGroupPicker{overflow:hidden}
#appointmentGroupPickerForm{min-height:0}
#appointmentGroupChoices{display:block;min-height:0;max-height:55dvh;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;scrollbar-width:auto;scrollbar-color:#83968e transparent;overscroll-behavior:contain;padding:4px 12px 4px 4px}
#appointmentGroupChoices .appointment-choice{display:flex;align-items:center;gap:12px;padding:12px 0}
#appointmentGroupChoices input{flex:0 0 20px;width:20px;min-height:20px;height:20px}
.workspace-message-dialog{box-sizing:border-box;width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:24px;border:1px solid #c8d7d4;border-radius:8px;background:#fff;color:#20343e;font:calc(16px * var(--ui-text-scale,1)) Arial,sans-serif;overflow:auto}
.workspace-message-dialog::backdrop{background:#14283270}
.workspace-message-dialog header,.workspace-message-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.workspace-message-dialog h2{font-size:20px;margin:0}.workspace-message-dialog p{line-height:1.5;overflow-wrap:anywhere;margin:20px 0}
.workspace-message-dialog button{font:inherit;padding:10px 16px;min-height:44px;border:1px solid #aebfb9;border-radius:6px;color:inherit;background:transparent;cursor:pointer}
.workspace-message-dialog header button{padding:8px;width:44px;display:grid;place-items:center}.workspace-message-dialog svg{width:20px;height:20px}
.workspace-message-dialog footer{justify-content:flex-end}.workspace-message-dialog footer button{min-width:96px}.workspace-message-dialog [hidden]{display:none!important}
.workspace-message-dialog :focus-visible{outline:2px solid #159b82;outline-offset:2px}
[data-ui-theme=dark] .workspace-message-dialog{background:#242b2e;color:#edf1f2;border-color:#52635d}
html[data-ui-theme=dark] :is(#appointmentEditor,#appointmentGroupPicker){background:#242b2e;color:#edf1f2}
html[data-ui-theme=dark] #appointmentForm :is(label,.appointment-vehicle){color:#edf1f2}
html[data-ui-theme=dark] #appointmentForm :is(input:not([type=range]),select,textarea){background:#30393d;color:#edf1f2;border-color:#697a80;color-scheme:dark}
html[data-ui-theme=dark] #appointmentForm input::placeholder{color:#bdc9ce}
html[data-ui-theme=dark] :is(#appointmentEditor,#appointmentGroupPicker) .button-secondary{background:#30393d;color:#edf1f2;border-color:#697a80}
@media(hover:hover){.workspace-message-dialog button:hover{background:#82929b1c}}
@media(max-width:600px){
 #appointmentEditor{box-sizing:border-box;left:0;right:0;min-width:0;width:calc(100% - 24px);max-width:700px}
 #appointmentForm{min-width:0;max-width:100%}
 #appointmentForm .appointment-fields{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%;overflow-x:hidden;overflow-y:auto}
 #appointmentForm .appointment-fields>label{grid-template-columns:minmax(0,1fr)}
 #appointmentForm :is(input:not([type=range]),select,textarea,#appointmentDateOpen){min-width:0;max-width:100%;box-sizing:border-box}
 #appointmentForm input[type=date]{display:block;appearance:none;-webkit-appearance:none;min-inline-size:0}
 #appointmentForm input[type=date]::-webkit-date-and-time-value{min-width:0;text-align:left}
 #appointmentForm input[type=date]::-webkit-datetime-edit{min-width:0;padding:0}
 #appointmentPanel .appointment-toolbar .search-control{flex-basis:100%}
 #appointmentPanel .appointment-toolbar select{flex:1;max-width:100%;min-width:0}
 #appointmentPanel .appointment-groups{flex-wrap:wrap}
 #appointmentPanel .appointment-groups label{flex-basis:100%}
 #appointmentCount{margin-left:auto}
 #appointmentForm .appointment-fields>*{order:4}
 .appointment-date-control{order:1!important;grid-row:auto}
 #appointmentForm .appointment-fields>label:nth-child(2){order:3}
 .workspace-message-dialog{padding:18px}
}