/* Графики: размеры привязаны к видимой области, а не к длине ФИО. */
#viewSched{width:100%;min-width:0}
#schBody{min-width:0;max-width:100%}
#schTabs{display:flex;flex-wrap:wrap;gap:6px}
#viewSched .sg-scroll{--sg-name-width:190px;--sg-day-width:34px;overflow:auto;overscroll-behavior-x:contain;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
#viewSched .sg{display:table;table-layout:fixed;width:calc(var(--sg-name-width) + var(--sg-days) * var(--sg-day-width));min-width:0;overflow:visible;white-space:normal;border:0}
#viewSched .sg-name-col{width:var(--sg-name-width)}
#viewSched .sg-day-col{width:var(--sg-day-width)}
#viewSched .sg .sg-name{width:var(--sg-name-width);min-width:0;max-width:var(--sg-name-width);padding:0 6px;white-space:normal;box-shadow:2px 0 3px #123b4a18}
#viewSched .sg th,#viewSched .sg td{min-width:0;height:40px}
#viewSched .sg-grp td{height:auto;padding:7px 8px}
.sg-group-label{display:block;position:sticky;left:8px;width:max-content;max-width:calc(100vw - 56px);white-space:normal}
.sg-person{display:flex;align-items:center;min-width:0;width:100%}
.sg-person-name{display:block;flex:1;min-width:0;max-width:100%;text-align:left;border:0;background:transparent;padding:5px 0;font-weight:600;line-height:1.35;min-height:44px}
.sg-person-name>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-person-initials{font-size:11px;font-weight:400}
#viewSched .sg-pat{flex:0 0 26px;width:26px;min-height:44px;font-size:20px;padding:0;text-align:right}
.sg-legend summary{cursor:pointer;color:var(--brand);font-weight:600;padding:4px 0}
.sg-legend>span{display:block}
.sg-scroll-hint{font-size:12px;color:var(--muted);margin:8px 0}
.sg-full-name{font-size:18px;font-weight:650;margin:0;overflow-wrap:anywhere}
#viewSched .staff-table{width:100%;white-space:normal}
#viewSched .staff-name{overflow-wrap:anywhere}
#viewSched .staff-actions .btn{min-height:40px}
.modal.schedule-person-modal,.modal.schedule-staff-modal{min-height:0;align-content:start;max-width:680px;margin-block:auto}
@media screen and (max-width:1100px){
 #viewSched{padding:10px}
 #viewSched .sg-scroll{--sg-name-width:clamp(108px,30vw,166px);--sg-day-width:36px}
 #viewSched .sg-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 #viewSched .sg-controls .sg-part,#viewSched .sg-controls .sg-legend{grid-column:1/-1}
 #viewSched .sg-part{display:flex;flex-wrap:wrap;gap:6px}
 #viewSched .sg-part button{white-space:normal;text-align:left;min-height:40px}
 #viewSched .st-title{font-size:16px;overflow-wrap:anywhere;margin:18px 0 10px}
 .modal.schedule-person-modal>header,.modal.schedule-staff-modal>header{position:sticky;top:0;margin:0;padding:8px 0;background:var(--surface)}
 html.in-app .modal.schedule-person-modal>header,html.in-app .modal.schedule-staff-modal>header{padding-top:max(8px,env(safe-area-inset-top,0px))}
 .modal.schedule-person-modal,.modal.schedule-staff-modal{margin:16px 0;padding:14px;max-width:calc(100vw - 24px);border-radius:12px}
 html.in-app .modal.schedule-person-modal,html.in-app .modal.schedule-staff-modal{margin-top:max(48px,env(safe-area-inset-top,0px));margin-bottom:max(56px,env(safe-area-inset-bottom,0px))}
 .modal.schedule-staff-modal .row:not(label){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
 .modal.schedule-staff-modal header h2{overflow-wrap:anywhere}
}
@media screen and (max-width:679px){
 .modal.schedule-staff-modal .row:not(label){grid-template-columns:minmax(0,1fr)}
}
@media screen and (max-width:359px){#viewSched .sg-controls{grid-template-columns:minmax(0,1fr)}}

/* На раскрытом складном телефоне — единый компактный список сотрудников. */
@media screen and (min-width:600px) and (max-width:1100px){
 #viewSched .staff-scroll{overflow:visible;max-width:100%}
 #viewSched .staff-table{display:table;table-layout:fixed;width:100%;min-width:0;max-width:100%;overflow:visible;font-size:13px;line-height:1.4}
 #viewSched .staff-table th,#viewSched .staff-table td{padding:8px 5px;white-space:normal;overflow-wrap:anywhere;vertical-align:middle}
 #viewSched .staff-table th{font-size:11px}
 #viewSched .staff-table th:nth-child(1){width:32%}
 #viewSched .staff-table th:nth-child(2){width:16%}
 #viewSched .staff-table th:nth-child(3){width:16%}
 #viewSched .staff-table th:nth-child(5){width:92px}
 #viewSched .staff-table .staff-name{font-weight:600}
 #viewSched .staff-table .staff-name .muted{font-size:11px;font-weight:400}
 #viewSched .staff-table .staff-phone{font-variant-numeric:tabular-nums}
 #viewSched .staff-table .actions{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 #viewSched .staff-table .btn{width:100%;min-height:44px;padding:6px 4px!important;font-size:12px;white-space:normal}
}
@media screen and (max-width:599px){
 #viewSched .staff-scroll{overflow:visible}
 #viewSched .staff-table{display:block;min-width:0;max-width:100%;overflow:visible;background:transparent}
 #viewSched .staff-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 #viewSched .staff-table tbody{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
 #viewSched .staff-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:10px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:0}
 #viewSched .staff-table td{display:block;min-width:0;border:0;padding:0;white-space:normal;overflow-wrap:anywhere}
 #viewSched .staff-table td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
 #viewSched .staff-table .staff-name{grid-column:1/-1;font-size:15px;font-weight:650;line-height:1.4}
 #viewSched .staff-table .staff-name .muted{font-size:12px;font-weight:400}
 #viewSched .staff-table .staff-phone,#viewSched .staff-table .staff-actions{grid-column:1/-1}
 #viewSched .staff-table .actions{display:flex;flex-wrap:wrap;gap:8px}
 #viewSched .staff-table .btn{min-height:44px;padding:8px 12px!important}
}