/*
  ServiceCRM mobile input controls fix.
  Цель: не дать нативным iOS/Android input[type=date/time] растягивать форму,
  карточку или всю страницу за правый край экрана.
  Базовые html_tags.css/base_blocks.css не меняем.
*/

@media (max-width: 820px){
  .standard-page,
  .standard-page *{
    box-sizing:border-box;
  }

  .standard-page .detail-page,
  .standard-page .panel,
  .standard-page .card,
  .standard-page .form-field,
  .standard-page .responsive-record-table,
  .standard-page .responsive-record-row,
  .standard-page .responsive-record-cell,
  .standard-page .filter-grid,
  .standard-page .grid,
  .standard-page .actions{
    max-width:100%;
    min-width:0;
  }

  .standard-page input.input[type="date"],
  .standard-page input.input[type="time"],
  .standard-page .form-field input[type="date"],
  .standard-page .form-field input[type="time"],
  .standard-page .responsive-record-cell input[type="date"],
  .standard-page .responsive-record-cell input[type="time"]{
    display:block;
    inline-size:100%;
    width:100%;
    max-inline-size:100%;
    max-width:100%;
    min-inline-size:0;
    min-width:0;
    justify-self:stretch;
    align-self:stretch;
    flex:1 1 auto;
    min-height:44px;
    height:auto;
    padding-inline:12px;
    font-size:16px;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .standard-page input[type="date"]::-webkit-date-and-time-value,
  .standard-page input[type="time"]::-webkit-date-and-time-value{
    min-inline-size:0;
    max-inline-size:100%;
    text-align:start;
  }

  .standard-page input[type="date"]::-webkit-calendar-picker-indicator,
  .standard-page input[type="time"]::-webkit-calendar-picker-indicator{
    flex:0 0 auto;
    margin-inline-start:4px;
  }

  .standard-page .responsive-record-cell.form-field,
  .standard-page .responsive-record-cell .form-field{
    width:100%;
  }

  .standard-page .responsive-record-cell.form-field > input.input[type="date"],
  .standard-page .responsive-record-cell.form-field > input.input[type="time"],
  .standard-page .responsive-record-cell .form-field > input.input[type="date"],
  .standard-page .responsive-record-cell .form-field > input.input[type="time"]{
    width:100%;
  }

  body[data-interface-mode="pwa"] .responsive-record-cell,
  body[data-interface-mode="mobile"] .responsive-record-cell{
    overflow:hidden;
  }

  body[data-interface-mode="pwa"] .responsive-record-cell[data-label="Перерыв до"],
  body[data-interface-mode="mobile"] .responsive-record-cell[data-label="Перерыв до"]{
    grid-template-columns:minmax(0,1fr);
  }

  body[data-interface-mode="pwa"] .responsive-record-cell[data-label="Перерыв до"] .btn,
  body[data-interface-mode="mobile"] .responsive-record-cell[data-label="Перерыв до"] .btn{
    width:100%;
    max-width:100%;
  }
}

@media (max-width: 380px){
  .standard-page input.input[type="date"],
  .standard-page input.input[type="time"],
  .standard-page .form-field input[type="date"],
  .standard-page .form-field input[type="time"]{
    padding-inline:10px;
    font-size:15px;
  }
}

/*
  PWA/mobile compact schedule layout.
  На страницах графика начало/окончание и перерыв с/до должны быть в одну строку,
  но не растягивать карточку за экран.
*/
@media (max-width: 820px){
  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-row,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:10px;
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--day,
  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--day-off,
  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--action,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--day,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--day-off,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--action{
    grid-column:1 / -1;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--time,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--time{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    align-content:start;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--time::before,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--time::before{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--time input.input[type="time"],
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--time input.input[type="time"]{
    width:100%;
    max-width:100%;
    min-width:0;
    padding-inline:10px;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--break-end > .form-field,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--break-end > .form-field{
    width:100%;
    min-width:0;
    max-width:100%;
    margin:0;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--break-end .btn,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--break-end .btn{
    width:100%;
    max-width:100%;
    margin-top:6px;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--action .btn,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--action .btn{
    width:100%;
  }
}

@media (max-width: 380px){
  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-row,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-row{
    gap:8px;
    padding:12px;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--time input.input[type="time"],
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--time input.input[type="time"]{
    padding-inline:8px;
    font-size:15px;
  }
}

/*
  Tap/focus fix for .link-grid__item.
  На iOS/Android браузерный tap-highlight может выглядеть как прямоугольник поверх
  скруглённой кнопки. Отключаем системный прямоугольник и оставляем скруглённый focus.
*/
.standard-page .link-grid__item{
  -webkit-tap-highlight-color:transparent;
  border-radius:18px;
}

.standard-page .link-grid__item:focus{
  outline:0;
}

.standard-page .link-grid__item:focus-visible{
  outline:0;
  border-radius:18px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--app-accent) 28%,transparent);
}

body[data-interface-mode="pwa"] .link-grid__item:hover,
body[data-interface-mode="pwa"] .link-grid__item:active,
body[data-interface-mode="mobile"] .link-grid__item:hover,
body[data-interface-mode="mobile"] .link-grid__item:active{
  border-radius:18px;
}

/*
  Strong iOS/Capacitor date/time input normalization.
  На реальном iPhone Safari/WKWebView date/time могут иметь собственную
  внутреннюю минимальную ширину. Отключаем нативное растягивание именно для
  mobile/PWA-режима и заставляем контролы жить внутри своей grid/flex-ячейки.
*/
@media (max-width: 820px){
  body[data-interface-mode="pwa"] input.input[type="date"],
  body[data-interface-mode="pwa"] input.input[type="time"],
  body[data-interface-mode="mobile"] input.input[type="date"],
  body[data-interface-mode="mobile"] input.input[type="time"],
  body[data-interface-mode="pwa"] .form-field input[type="date"],
  body[data-interface-mode="pwa"] .form-field input[type="time"],
  body[data-interface-mode="mobile"] .form-field input[type="date"],
  body[data-interface-mode="mobile"] .form-field input[type="time"]{
    -webkit-appearance:none !important;
    appearance:none !important;
    box-sizing:border-box !important;
    display:block !important;
    inline-size:100% !important;
    width:100% !important;
    max-inline-size:100% !important;
    max-width:100% !important;
    min-inline-size:0 !important;
    min-width:0 !important;
    flex:1 1 0 !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 9px !important;
    border-radius:14px !important;
    font-size:16px !important;
    line-height:normal !important;
    text-align:left !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    background-clip:padding-box !important;
  }

  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-datetime-edit,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-datetime-edit,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-datetime-edit,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-datetime-edit,
  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-datetime-edit-fields-wrapper,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-datetime-edit-fields-wrapper{
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:0 !important;
    height:100% !important;
    padding:0 !important;
    line-height:normal !important;
    overflow:hidden !important;
  }

  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-date-and-time-value,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-date-and-time-value,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-date-and-time-value,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-date-and-time-value{
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    line-height:normal !important;
    text-align:left !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-calendar-picker-indicator,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-calendar-picker-indicator,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-calendar-picker-indicator,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-calendar-picker-indicator{
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    padding:0 !important;
    margin:0 0 0 3px !important;
  }

  body[data-interface-mode="pwa"] .schedule-record-table,
  body[data-interface-mode="mobile"] .schedule-record-table,
  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-row,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-row,
  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--time,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--time,
  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--time > .form-field,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--time > .form-field{
    min-inline-size:0 !important;
    min-width:0 !important;
    max-inline-size:100% !important;
    max-width:100% !important;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--time,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--time{
    display:block !important;
  }

  body[data-interface-mode="pwa"] .schedule-record-table .schedule-record-cell--break-end,
  body[data-interface-mode="mobile"] .schedule-record-table .schedule-record-cell--break-end{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    row-gap:6px !important;
  }

  body[data-interface-mode="pwa"] .detail-page--pwa-flush .form-grid,
  body[data-interface-mode="mobile"] .detail-page--pwa-flush .form-grid{
    grid-template-columns:minmax(0,1fr) !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
}

@media (max-width: 380px){
  body[data-interface-mode="pwa"] input.input[type="date"],
  body[data-interface-mode="pwa"] input.input[type="time"],
  body[data-interface-mode="mobile"] input.input[type="date"],
  body[data-interface-mode="mobile"] input.input[type="time"]{
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding-inline:7px !important;
    font-size:16px !important;
    line-height:normal !important;
  }

  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-date-and-time-value,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-date-and-time-value,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-date-and-time-value,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-date-and-time-value{
    height:auto !important;
    min-height:0 !important;
    line-height:normal !important;
    display:flex !important;
    align-items:center !important;
  }
}

/*
  Yandex Maps controls isolation.
  Наши mobile/PWA фиксы выше специально нормализуют box-sizing/input'ы внутри
  .standard-page, но внутренние контролы Яндекс.Карт ожидают свои стандартные
  размеры. Возвращаем для ymaps DOM их собственную модель, чтобы иконки кнопок
  масштабирования/геолокации/слоёв не съезжали.
*/
.standard-page [class^="ymaps-"],
.standard-page [class*=" ymaps-"],
.standard-page [class^="ymaps-"] *,
.standard-page [class*=" ymaps-"] *{
  box-sizing:content-box;
}

.standard-page [class^="ymaps-"] button,
.standard-page [class*=" ymaps-"] button,
.standard-page [class^="ymaps-"] input,
.standard-page [class*=" ymaps-"] input,
.standard-page [class^="ymaps-"] textarea,
.standard-page [class*=" ymaps-"] textarea,
.standard-page [class^="ymaps-"] select,
.standard-page [class*=" ymaps-"] select{
  -webkit-appearance:auto;
  appearance:auto;
  box-sizing:content-box;
  width:auto;
  min-width:0;
  max-width:none;
  height:auto;
  min-height:0;
  max-height:none;
  padding:initial;
  border-radius:initial;
  font:initial;
  line-height:normal;
}

.standard-page [class^="ymaps-"] button,
.standard-page [class*=" ymaps-"] button{
  display:inline-block;
}

/*
  PWA/mobile select normalization.
  В iOS Simulator/WKWebView закрытый <select> без appearance:none выглядит как
  системный контрол и выбивается из дизайна .input. Нативный picker при нажатии
  остаётся, но сам элемент на странице оформляется как обычное поле ServiceCRM.
*/
@media (max-width: 820px){
  body[data-interface-mode="pwa"] select.input:not([multiple]):not([size]),
  body[data-interface-mode="mobile"] select.input:not([multiple]):not([size]),
  body[data-interface-mode="pwa"] .form-field select:not([multiple]):not([size]),
  body[data-interface-mode="mobile"] .form-field select:not([multiple]):not([size]),
  body[data-interface-mode="pwa"] .filter-grid select:not([multiple]):not([size]),
  body[data-interface-mode="mobile"] .filter-grid select:not([multiple]):not([size]){
    -webkit-appearance:none !important;
    appearance:none !important;
    box-sizing:border-box !important;
    display:block !important;
    inline-size:100% !important;
    width:100% !important;
    max-inline-size:100% !important;
    max-width:100% !important;
    min-inline-size:0 !important;
    min-width:0 !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    padding:0 38px 0 12px !important;
    border:1px solid var(--mobile-border,var(--app-border)) !important;
    border-radius:14px !important;
    background-color:var(--mobile-surface,var(--app-surface)) !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%237a8aa0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 12px center !important;
    background-size:16px 16px !important;
    color:var(--mobile-text,var(--app-text)) !important;
    font-family:var(--font-family-base,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif) !important;
    font-size:16px !important;
    font-weight:var(--font-weight-base,400) !important;
    line-height:40px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    box-shadow:none !important;
    outline:0;
  }

  body[data-interface-mode="pwa"] select.input:not([multiple]):not([size]):focus,
  body[data-interface-mode="mobile"] select.input:not([multiple]):not([size]):focus,
  body[data-interface-mode="pwa"] .form-field select:not([multiple]):not([size]):focus,
  body[data-interface-mode="mobile"] .form-field select:not([multiple]):not([size]):focus,
  body[data-interface-mode="pwa"] .filter-grid select:not([multiple]):not([size]):focus,
  body[data-interface-mode="mobile"] .filter-grid select:not([multiple]):not([size]):focus{
    border-color:color-mix(in srgb,var(--mobile-accent,var(--app-accent)) 54%,var(--mobile-border,var(--app-border))) !important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--mobile-accent,var(--app-accent)) 18%,transparent) !important;
  }

  body[data-interface-mode="pwa"] select.input:not([multiple]):not([size])::-ms-expand,
  body[data-interface-mode="mobile"] select.input:not([multiple]):not([size])::-ms-expand{
    display:none;
  }

  body[data-interface-mode="pwa"] select.input:not([multiple]):not([size]) option,
  body[data-interface-mode="mobile"] select.input:not([multiple]):not([size]) option,
  body[data-interface-mode="pwa"] .form-field select:not([multiple]):not([size]) option,
  body[data-interface-mode="mobile"] .form-field select:not([multiple]):not([size]) option{
    background:var(--mobile-surface,var(--app-surface));
    color:var(--mobile-text,var(--app-text));
  }
}

/* Dark/system theme note.
   Do not override only background-image for mobile/PWA selects here.
   The base select rule above already sets the full field background:
   background-color + custom chevron + repeat/position/size.
   A later theme-only background-image override breaks page-level select backgrounds,
   especially in system dark mode, because it wins in the cascade while keeping the
   rest of the background from another rule. */


/*
  iOS/Android native date/time vertical alignment.
  На реальном телефоне Safari/WKWebView может рисовать значение date/time
  внутри собственного shadow DOM в верхнем левом углу, особенно после наших
  ограничений ширины/высоты. Последний слой нормализации задаёт единую высоту
  и line-height для самого поля и webkit-внутренностей, чтобы значение было
  визуально по центру как у обычного .input.
*/
@media (max-width: 820px), (hover: none) and (pointer: coarse){
  html[data-crm-ui="pwa"] input.input[type="date"],
  html[data-crm-ui="pwa"] input.input[type="time"],
  body[data-interface-mode="pwa"] input.input[type="date"],
  body[data-interface-mode="pwa"] input.input[type="time"],
  body[data-interface-mode="mobile"] input.input[type="date"],
  body[data-interface-mode="mobile"] input.input[type="time"],
  html[data-crm-ui="pwa"] .form-field input[type="date"],
  html[data-crm-ui="pwa"] .form-field input[type="time"],
  body[data-interface-mode="pwa"] .form-field input[type="date"],
  body[data-interface-mode="pwa"] .form-field input[type="time"],
  body[data-interface-mode="mobile"] .form-field input[type="date"],
  body[data-interface-mode="mobile"] .form-field input[type="time"]{
    --mobile-native-date-time-height:44px;
    -webkit-appearance:none !important;
    appearance:none !important;
    display:block !important;
    box-sizing:border-box !important;
    height:var(--mobile-native-date-time-height) !important;
    min-height:var(--mobile-native-date-time-height) !important;
    max-height:var(--mobile-native-date-time-height) !important;
    padding-block:0 !important;
    padding-inline:12px !important;
    line-height:var(--mobile-native-date-time-height) !important;
    vertical-align:middle !important;
    text-align:left !important;
  }

  html[data-crm-ui="pwa"] input.input[type="date"]::-webkit-datetime-edit,
  html[data-crm-ui="pwa"] input.input[type="time"]::-webkit-datetime-edit,
  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-datetime-edit,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-datetime-edit,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-datetime-edit,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-datetime-edit,
  html[data-crm-ui="pwa"] input.input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  html[data-crm-ui="pwa"] input.input[type="time"]::-webkit-datetime-edit-fields-wrapper,
  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-datetime-edit-fields-wrapper,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-datetime-edit-fields-wrapper{
    display:flex !important;
    align-items:center !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:var(--mobile-native-date-time-height,44px) !important;
    min-height:var(--mobile-native-date-time-height,44px) !important;
    max-height:var(--mobile-native-date-time-height,44px) !important;
    padding:0 !important;
    margin:0 !important;
    line-height:var(--mobile-native-date-time-height,44px) !important;
    overflow:hidden !important;
  }

  html[data-crm-ui="pwa"] input.input[type="date"]::-webkit-date-and-time-value,
  html[data-crm-ui="pwa"] input.input[type="time"]::-webkit-date-and-time-value,
  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-date-and-time-value,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-date-and-time-value,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-date-and-time-value,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-date-and-time-value{
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:var(--mobile-native-date-time-height,44px) !important;
    min-height:var(--mobile-native-date-time-height,44px) !important;
    max-height:var(--mobile-native-date-time-height,44px) !important;
    padding:0 !important;
    margin:0 !important;
    line-height:var(--mobile-native-date-time-height,44px) !important;
    text-align:left !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  html[data-crm-ui="pwa"] input.input[type="date"]::-webkit-calendar-picker-indicator,
  html[data-crm-ui="pwa"] input.input[type="time"]::-webkit-calendar-picker-indicator,
  body[data-interface-mode="pwa"] input.input[type="date"]::-webkit-calendar-picker-indicator,
  body[data-interface-mode="pwa"] input.input[type="time"]::-webkit-calendar-picker-indicator,
  body[data-interface-mode="mobile"] input.input[type="date"]::-webkit-calendar-picker-indicator,
  body[data-interface-mode="mobile"] input.input[type="time"]::-webkit-calendar-picker-indicator{
    align-self:center !important;
    margin-block:0 !important;
  }
}

/*
  PWA/mobile two-column metric grids.
  Используется там, где в мобильном и PWA режиме нужны компактные показатели по 2 в строку,
  не меняя базовое правило html[data-crm-ui="pwa"] .grid--cards { grid-template-columns: 1fr; }.
*/
@media (max-width: 820px){
  html[data-crm-ui="pwa"] .pwa-two-column-stats.grid--cards,
  html[data-crm-ui="mobile"] .pwa-two-column-stats.grid--cards,
  body[data-interface-mode="pwa"] .pwa-two-column-stats.grid--cards,
  body[data-interface-mode="mobile"] .pwa-two-column-stats.grid--cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  html[data-crm-ui="pwa"] .pwa-two-column-stats.grid--cards > .stat,
  html[data-crm-ui="mobile"] .pwa-two-column-stats.grid--cards > .stat,
  body[data-interface-mode="pwa"] .pwa-two-column-stats.grid--cards > .stat,
  body[data-interface-mode="mobile"] .pwa-two-column-stats.grid--cards > .stat{
    min-width:0;
    padding:14px 10px;
  }

  html[data-crm-ui="pwa"] .pwa-two-column-stats.grid--cards > .stat b,
  html[data-crm-ui="mobile"] .pwa-two-column-stats.grid--cards > .stat b,
  body[data-interface-mode="pwa"] .pwa-two-column-stats.grid--cards > .stat b,
  body[data-interface-mode="mobile"] .pwa-two-column-stats.grid--cards > .stat b{
    display:inline-block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  html[data-crm-ui="pwa"] .pwa-two-column-stats.grid--cards > .stat .text-small,
  html[data-crm-ui="mobile"] .pwa-two-column-stats.grid--cards > .stat .text-small,
  body[data-interface-mode="pwa"] .pwa-two-column-stats.grid--cards > .stat .text-small,
  body[data-interface-mode="mobile"] .pwa-two-column-stats.grid--cards > .stat .text-small{
    display:inline-block;
    max-width:100%;
    line-height:1.25;
  }
}

@media (max-width: 360px){
  html[data-crm-ui="pwa"] .pwa-two-column-stats.grid--cards > .stat,
  html[data-crm-ui="mobile"] .pwa-two-column-stats.grid--cards > .stat,
  body[data-interface-mode="pwa"] .pwa-two-column-stats.grid--cards > .stat,
  body[data-interface-mode="mobile"] .pwa-two-column-stats.grid--cards > .stat{
    padding:12px 8px;
  }
}

/*
  PWA form/edit screens without bottom navigation.
  Нижняя панель скрывается на страницах редактирования, поэтому уменьшаем нижний
  отступ оболочки, чтобы форма не выглядела как будто под неё зарезервировано меню.
*/
html[data-crm-ui="pwa"] body.standard-page--pwa-no-bottom-nav .pwa-shell,
body.standard-page--pwa-no-bottom-nav[data-interface-mode="pwa"] .pwa-shell{
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}

/*
  Broadcast free-time slots on compact interfaces.
  В PWA/мобильной версии кнопки времени мастера должны помещаться по несколько в строку.
*/
html[data-crm-ui="pwa"] .broadcast-master-schedule-slots,
html[data-crm-ui="mobile"] .broadcast-master-schedule-slots,
body[data-interface-mode="pwa"] .broadcast-master-schedule-slots,
body[data-interface-mode="mobile"] .broadcast-master-schedule-slots{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  gap:8px;
  align-items:stretch;
}

html[data-crm-ui="pwa"] .broadcast-master-slot-button,
html[data-crm-ui="mobile"] .broadcast-master-slot-button,
body[data-interface-mode="pwa"] .broadcast-master-slot-button,
body[data-interface-mode="mobile"] .broadcast-master-slot-button{
  width:100%;
  min-height:38px;
  padding:8px 10px;
  line-height:1.2;
  white-space:nowrap;
}

@media (max-width: 820px){
  .broadcast-master-schedule-slots{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
    gap:8px;
    align-items:stretch;
  }

  .broadcast-master-slot-button{
    width:100%;
    min-height:38px;
    padding:8px 10px;
    line-height:1.2;
    white-space:nowrap;
  }
}