/* ===== management / admin surface polish ===== */

/* Нижняя навигация должна быть скруглённым прямоугольником, а не pill. */
nav.tabs{
  border-radius:16px;
}

nav.tabs button{
  border-radius:12px;
}

/* На телефонах нижняя панель совпадает по рабочей ширине с карточками страницы. */
@media (max-width:520px){
  .bottom-controls{
    padding-left:calc(var(--ui-gutter,16px) + env(safe-area-inset-left));
    padding-right:calc(var(--ui-gutter,16px) + env(safe-area-inset-right));
  }

  nav.tabs{
    width:100%;
  }
}

/*
  При смене месяца старый экран клонируется как inert-слепок и его id удаляются.
  Поэтому геометрию списка нельзя завязывать только на #shiftListArea: иначе
  слепок на один кадр меняет flex-раскладку и выглядит как вертикальный ghost.
*/
main.shifts-layout > :is(#shiftListArea,div:has(> .shift-window)){
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
}

main.shifts-layout > :is(#shiftListArea,div:has(> .shift-window)) > .ml{
  flex:none;
}

/*
  Тот же слепок теряет #app, поэтому refinement-селекторы итогов должны
  описывать реальный main и его inert-копию одинаково. Иначе при свайпе
  отступы живого экрана и слепка расходятся, и контент визуально съезжает.
*/
body[data-active-tab] > main > .ml:first-child{
  margin-top:2px;
}

body[data-active-tab="stats"] > main > .card:has(.stats-filter-row){
  margin-bottom:12px;
}

/*
  Детальные экраны управления используют оставшуюся высоту как рабочую область.

  Флаг стоит на самом #app, а не на body: слепок старого экрана во время
  перехода сохраняет прежнее значение и не прыгает на 16px в первом кадре.
  Заголовок раздела — первый ребёнок #app, поэтому его отступ задаётся через
  #app: иначе его перебивает общее правило #app > .ml:first-child.
*/
body main[data-manage-detail="true"]{
  padding-top:calc(68px + env(safe-area-inset-top));
}

body #app[data-manage-detail="true"] > .ml:first-child,
body main[data-manage-detail="true"] > .ml:first-child{
  margin-top:8px;
  margin-left:3px;
}

body[data-active-tab="manage"] main:has(#employeeList),
body[data-active-tab="manage"] main:has(#pointManageList){
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding-bottom:16px;
}

body[data-active-tab="manage"] main:has(#employeeList) > :not(#employeeList),
body[data-active-tab="manage"] main:has(#pointManageList) > :not(#pointManageList){
  flex:none;
}

/*
  Область списка забирает всё свободное место до нижней навигации. Само белое
  окно остаётся высотой по контенту, пока строк мало; при длинном списке оно
  расширяется до доступной высоты и только после этого включает внутренний скролл.
*/
#employeeList,
#pointManageList{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#employeeList > .manage-menu,
#pointManageList > .manage-menu{
  min-height:0;
  width:100%;
  height:auto;
  max-height:100%;
  flex:0 1 auto;

  overflow-x:hidden;
  overflow-y:auto;
  border-radius:var(--ui-radius,16px);

  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

#employeeList .employee-row{
  min-height:76px;
}

/*
  На iPhone в зоне списка должны целиком помещаться служебная строка «Подмена»
  и ещё пять сотрудников. Текст остаётся трёхстрочным, поэтому уменьшаем только
  вертикальные отступы и межстрочный ритм, не размер шрифта и не touch-target.
*/
@media (max-width:520px){
  #employeeList .employee-row{
    min-height:64px;
    padding-top:5px;
    padding-bottom:5px;
  }

  #employeeList .employee-row .manage-row-copy{
    gap:2px;
  }

  #employeeList .employee-row .manage-row-title{
    line-height:1.2;
  }

  #employeeList .employee-row .manage-row-detail{
    line-height:1.2;
  }
}

#pointManageList .point-manage-row{
  min-height:54px;
}

.manage-point-delete,
.manage-employee-delete{
  margin-top:16px;
}

/* Пустой каталог ПВЗ выглядит как нормальная карточка, а не тонкая пустая линия. */
.employee-points-empty{
  width:100%;
  min-height:112px;
  padding:22px 18px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;

  text-align:center;
}

.employee-points-empty-title{
  color:var(--ink);
  font-size:15px;
  font-weight:600;
  line-height:1.3;
}

.employee-points-empty-detail{
  max-width:290px;
  color:var(--ink3);
  font-size:13px;
  line-height:1.35;
}

/* Архивные ПВЗ видны в полном списке назначений, но не назначаются заново. */
.employee-point-state{
  margin-left:auto;
  flex:none;
  color:var(--ink3);
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

.employee-point-archived:not(.on){
  color:var(--ink2);
}

.employee-point-archived:disabled{
  opacity:.68;
  cursor:default;
}

/* Подпись под редактором тарифа объясняет, что именно изменится. */
#manageEditorSheet .tariff-editor-help{
  margin:7px 4px 0;
  color:var(--ink3);
  font-size:10.5px;
  line-height:1.35;
}

@media (orientation:landscape) and (max-height:520px){
  body main[data-manage-detail="true"]{
    padding-top:calc(54px + env(safe-area-inset-top));
  }
}

/*
  Возврат из раздела управления — штатная кнопка шапки и выглядит как до
  7.0: прозрачная стрелка без круга.

  Внутри header с backdrop-filter WebKit на 1–2 кадра рисует тёмный квадрат
  44×44 вокруг прозрачной кнопки, если у неё появляется transform, тень или
  фон (исправление #39). Поэтому ни касание, ни фокус указателем их не
  добавляют; клавиатурный focus-visible остаётся за accessibility.css.
*/
#manageBack{
  border:0;
  border-radius:0;
  background:transparent !important;
  color:var(--ink2);
  box-shadow:none !important;
  appearance:none;
  -webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  transform:none !important;
  transition:
    color var(--ui-base) ease,
    opacity var(--ui-base) ease !important;
}

#manageBack svg{
  width:11px;
  height:18px;
  stroke-width:1.8;
}

#manageBack.touch-active,
#manageBack:active{
  transform:none !important;
  background:transparent !important;
  box-shadow:none !important;
}

body:not([data-input-modality="keyboard"]) #manageBack:focus,
body:not([data-input-modality="keyboard"]) #manageBack:focus-visible{
  outline:none !important;
  outline-width:0 !important;
  outline-offset:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  transform:none !important;
}

@media (hover:hover) and (pointer:fine){
  #manageBack:hover{
    color:var(--ink);
    background:transparent !important;
    transform:none !important;
  }
}