:root{
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:20px;
  --ui-space-6:24px;
  --ui-fast:120ms;
  --ui-base:180ms;
  --ui-slow:300ms;
  --ui-ease:cubic-bezier(.2,.8,.2,1);
  --ui-ease-out:cubic-bezier(.16,1,.3,1);
  --ui-gutter:16px;
  --ui-sheet-max:720px;
  --ui-picker-max:720px;
  --ui-calendar-max:520px;
  --ui-radius:16px;
  --ui-radius-small:12px;
}

html{
  font-synthesis:none;
}

body{
  text-rendering:optimizeLegibility;
}

button,
input,
textarea,
select{
  touch-action:manipulation;
}

header{
  padding-right:var(--ui-gutter);
  padding-left:var(--ui-gutter);
}

main{
  padding-top:calc(88px + env(safe-area-inset-top));
  padding-right:var(--ui-gutter);
  padding-left:var(--ui-gutter);
}

/* Общий вертикальный ритм */
.ml{
  margin:20px 3px 7px;
  font-size:9.5px;
  line-height:1.2;
  letter-spacing:.14em;
}

#app > .ml:first-child{
  margin-top:2px;
}

.card{
  border-radius:var(--ui-radius);
}

.card + .card{
  margin-top:8px;
}

.row{
  min-height:52px;
  gap:12px;
  padding:12px 14px;
}

.row .l{
  gap:3px;
}

.row .t,
.manage-row-title,
.data-status-title{
  line-height:1.28;
}

.row .s,
.manage-row-detail,
.data-status-detail,
.employee-help,
.note{
  line-height:1.42;
}

.sh{
  min-height:54px;
  gap:12px;
  padding:10px 14px;
}

.hero{
  padding:20px 18px 18px;
}

.hero .k{
  margin-bottom:6px;
}

.hero .sub{
  max-width:52ch;
  line-height:1.4;
}

.manage-row{
  min-height:58px;
  padding:11px 14px;
  gap:12px;
}

.manage-row-copy{
  gap:3px;
}

.manage-row-detail{
  max-width:58ch;
}

.manage-add,
.btn{
  min-height:46px;
  border-radius:13px;
}

.manage-add{
  margin-top:0;
}

.btn{
  margin-top:8px;
  padding:12px 14px;
}

.employee-archive-button{
  margin-top:7px;
}

.employee-editor .row,
.employee-detail .row{
  min-height:52px;
}

.data-status{
  padding:14px;
  border-radius:var(--ui-radius);
}

/*
  Раньше плитку здесь «раздевали», а рамку, фон и скругление носила сама
  строка: одиночный контрол, открывающий окно снизу, выглядел так
  аккуратнее. Теперь список сотрудников раскрывается внутри этой плитки,
  и рамка снова нужна ей самой — иначе раскрытое вываливается за её края
  на страницу.
*/
body[data-active-tab="stats"] #app > .card:has(.stats-filter-row){
  margin-bottom:12px;
}

/*
  По бокам — те же 16px, что у каждой строки приложения: тогда подпись
  слева и стрелка справа стоят на одинаковом отступе от краёв плитки.
  Ниже и выше отступ меньше: строка одна и должна остаться компактной.
*/
body[data-active-tab="stats"] .stats-filter-row{
  min-height:50px;
  padding:10px 16px;
}

body[data-active-tab="stats"] .stats-filter-row .t{
  width:auto;
  color:var(--ink3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-active-tab="stats"] .stats-filter-row .point-value{
  font-size:14px;
  font-weight:550;
}

/*
  Стрелка раскрытия у строки сотрудника — общая, из inline-fields.css.

  Своя была нарисована раньше, когда строка открывала окно снизу и
  стрелка была флексовым соседом текста. После переезда списка внутрь
  плитки общее правило сделало стрелку абсолютной, а здешнее продолжало
  задавать ей размер и поворот — и побеждало по весу селектора. Выходило
  сразу три расхождения с остальными селекторами приложения: стрелка
  висела ниже середины строки (своего translateY у неё не осталось), не
  поворачивалась при раскрытии и стояла дальше от имени. Остаётся только
  то, ради чего это правило и нужно: выбирать нечего — стрелки нет.
*/
body[data-active-tab="stats"] .stats-filter-row:disabled::after{
  display:none;
}

.payout-summary{
  min-height:60px;
  padding-top:10px;
  padding-bottom:10px;
}

.payout-breakdown{
  padding:14px 14px 4px;
}

.payout-progress{
  margin-right:14px;
  margin-left:14px;
}

.payout-history{
  margin-right:14px;
  margin-left:14px;
}

/* Вложенные блоки не должны выглядеть как карточка внутри карточки внутри карточки */
.payout-source-list,
.payout-history,
.payout-editor{
  border-color:var(--line);
  background:var(--tint-soft);
  box-shadow:none;
}

.developer-credit{
  display:none;
}

/* Нижняя навигация: единая ширина и равные вкладки */
nav.tabs{
  width:min(calc(100% - 24px),520px);
  min-height:48px;
  height:auto;
  padding:4px;
}

nav.tabs button{
  flex:1 1 0;
  min-width:0 !important;
  min-height:40px;
  padding:0 10px;
  border-radius:12px;
  line-height:1;
  text-align:center;
}

.period{
  min-height:42px;
  font-weight:600;
}

.nav > button{
  width:42px;
  height:42px;
}

/* Все оверлеи используют одну сетку, но календарь остаётся компактнее */
.sheet{
  max-width:var(--ui-sheet-max);
}

.point-picker{
  max-width:var(--ui-picker-max);
}

.month-picker,
.date-picker{
  max-width:var(--ui-calendar-max);
}

.sheet{
  transform:translate3d(0,calc(100% + 28px),0);
}

/*
  Окна-карточки приподняты над нижней границей экрана на safe-area, поэтому
  их закрытая поза уводит вниз ещё и этот отступ. Иначе верхняя кромка
  остаётся на экране после анимации.
*/
.point-picker,
.month-picker,
.date-picker{
  transform:translate3d(
    0,
    calc(
      100% +
      28px +
      env(safe-area-inset-bottom)
    ),
    0
  );
}

.sheet.on,
.point-picker.on,
.month-picker.on,
.date-picker.on{
  transform:translate3d(0,var(--sheet-drag,0px),0);
}

.point-picker.on{
  transform:translate3d(0,var(--point-drag,0px),0);
}

.month-picker.on{
  transform:translate3d(0,var(--month-drag,0px),0);
}

.date-picker.on{
  transform:translate3d(0,var(--date-drag,0px),0);
}

.sheet{
  transition:
    transform var(--ui-slow) var(--ui-ease-out),
    opacity var(--ui-base) ease;
}

.point-picker,
.month-picker,
.date-picker{
  transition:
    transform var(--ui-slow) var(--ui-ease-out),
    opacity var(--ui-base) ease;
}

.veil,
.point-veil,
.month-veil,
.date-veil{
  transition:opacity var(--ui-base) ease;
}

/* Desktop picker больше не превращается в узкий popover у поля */
@media (min-width:760px) and (hover:hover) and (pointer:fine){
  .point-veil.app-picker-anchored-veil{
    background:var(--veil);
    transition:opacity var(--ui-base) ease;
  }

  .point-picker.app-picker-anchored,
  .point-picker.app-picker-anchored.app-picker-above{
    left:24px;
    right:24px;
    top:auto;
    bottom:24px;
    width:auto;
    max-width:var(--ui-picker-max);
    max-height:min(72dvh,620px);
    margin:0 auto;
    border-radius:20px;
    transform:translate3d(0,calc(100% + 32px),0);
    transform-origin:center bottom;
    opacity:.98;
    transition:
      transform var(--ui-slow) var(--ui-ease-out),
      opacity var(--ui-base) ease;
  }

  .point-picker.app-picker-anchored.on,
  .point-picker.app-picker-anchored.app-picker-above.on{
    transform:translate3d(0,var(--point-drag,0px),0);
    opacity:1;
  }

  .point-picker.app-picker-anchored .point-picker-handle{
    display:grid;
  }

  .point-picker.app-picker-anchored .picker-toolbar{
    display:flex;
  }

  .point-picker.app-picker-anchored .point-list{
    max-height:min(54dvh,470px);
    border-top:1px solid var(--line);
  }
}

.point-picker-search{
  height:48px;
  padding-right:14px;
  padding-left:14px;
}

.point-option{
  min-height:48px;
  padding:12px 15px;
  font-size:13.5px;
}

.point-name{
  line-height:1.3;
}

/* Календарь: компактные строки вместо растянутых квадратов */
.date-picker{
  padding-right:14px;
  padding-bottom:14px;
  padding-left:14px;
}

.date-calendar-head{
  grid-template-columns:40px minmax(0,1fr) 40px;
  gap:8px;
  max-width:440px;
  margin:2px auto 10px;
}

.date-calendar-title{
  min-height:40px;
  padding:8px 26px;
  border-radius:12px;
  background:var(--tint-soft);
}

.date-calendar-nav{
  width:40px;
  height:40px;
  border-radius:12px;
}

.date-weekdays,
.date-grid{
  width:100%;
  max-width:440px;
  margin-right:auto;
  margin-left:auto;
  gap:3px 5px;
}

.date-weekdays{
  margin-bottom:3px;
}

.date-weekdays span{
  padding:5px 0 4px;
  font-size:9px;
}

.date-day{
  width:100%;
  height:40px;
  aspect-ratio:auto;
  border-radius:11px;
  font-size:13px;
}

.date-day.today:not(.on){
  border-radius:11px;
}

.date-day.on{
  border-radius:11px;
}

.date-day.outside{
  opacity:.34;
}

.date-today,
.month-today{
  width:auto;
  min-width:132px;
  height:40px;
  margin:12px auto 0;
  padding:0 18px;
  display:block;
  border-radius:12px;
}

.date-jump{
  left:14px;
  right:14px;
  padding:12px;
  border-radius:16px;
}

.date-jump-months{
  gap:7px;
}

.date-jump-month{
  min-height:40px;
  border-radius:11px;
}

.month-grid{
  gap:7px;
}

.month-option{
  min-height:44px;
  border-radius:12px;
}

/* Диалоги и transient UI */
.app-confirm{
  transition:opacity var(--ui-base) ease;
}

.app-confirm-box{
  transition:transform var(--ui-base) var(--ui-ease-out);
}

.toast{
  transition:
    opacity var(--ui-base) ease,
    transform var(--ui-base) var(--ui-ease-out);
}

.payout-summary::after,
.tariff-history-chevron,
.employee-point-check,
.point-check,
.manage-chevron,
.date-day,
.month-option,
.date-jump-month,
.seg button{
  transition:
    transform var(--ui-base) var(--ui-ease),
    opacity var(--ui-base) ease,
    background-color var(--ui-base) ease,
    border-color var(--ui-base) ease,
    color var(--ui-base) ease;
}

.employee-point.on .employee-point-check,
.point-option.on .point-check{
  transform:scale(1);
}

.employee-point:not(.on) .employee-point-check,
.point-option:not(.on) .point-check{
  transform:scale(.9);
}

.shift-scroll,
.point-list,
.sheet,
.employee-filter-sheet,
.date-picker,
.month-picker{
  overscroll-behavior:contain;
}

@media (hover:hover) and (pointer:fine){
  .nav > button:not(:disabled),
  .period.clickable,
  nav.tabs button,
  .sh,
  .manage-row,
  .manage-add,
  .btn,
  .point-row,
  .employee-point,
  .point-option,
  .date-day,
  .month-option,
  .date-jump-month,
  .date-calendar-nav,
  .picker-toolbar-btn,
  .lnk,
  .payout-summary,
  .tariff-history-item > summary,
  .app-confirm-btn{
    transition:
      transform var(--ui-fast) var(--ui-ease),
      background-color var(--ui-base) ease,
      border-color var(--ui-base) ease,
      color var(--ui-base) ease,
      opacity var(--ui-base) ease,
      box-shadow var(--ui-base) ease;
  }

  .nav > button:not(:disabled):hover,
  .period.clickable:hover,
  nav.tabs button:not(.on):hover,
  .manage-row:hover,
  .sh:hover,
  .point-row:hover,
  .employee-point:hover,
  .point-option:hover,
  .payout-summary:hover,
  .payroll-person-row:hover,
  .tariff-history-item > summary:hover{
    background:var(--tint-soft);
  }

  .manage-add:hover,
  .btn:hover:not(:disabled),
  .app-confirm-btn:hover{
    transform:translateY(-1px);
  }

  /*
    Текст не подпрыгивает под курсором: кнопка с поверхностью
    приподнимается, а слово — лишь чуть бледнеет. Раньше часть текстовых
    действий поднималась на пиксель, часть не менялась вовсе, и соседние
    «Выбрать все» и «Удалить» вели себя по-разному.
  */
  .lnk:not(:disabled):hover,
  .picker-toolbar-btn:hover,
  .ml-action:hover,
  .payroll-report-link:hover,
  .shift-select-all:hover{
    opacity:.78;
  }

  .nav > button:not(:disabled):active,
  .period.clickable:active,
  nav.tabs button:active,
  .sh:active,
  .manage-row:active,
  .manage-add:active,
  .btn:active:not(:disabled),
  .point-row:active,
  .employee-point:active,
  .point-option:active,
  .date-day:active,
  .month-option:active,
  .date-jump-month:active,
  .payout-summary:active,
  .app-confirm-btn:active{
    transform:scale(.985);
  }
}

@media (min-width:700px) and (hover:hover) and (pointer:fine){
  body.login-page .auth-card{
    top:50%;
    width:min(calc(100% - 48px),380px);
  }
}

@media (min-width:900px) and (hover:hover) and (pointer:fine){
  :root{
    --ui-gutter:22px;

    /*
      Одна мера ширины на все разделы.

      Раньше у каждого раздела была своя: «Смены» тянулись на весь
      монитор, «Управление» держалось 960–1020px, «Итоги» и «Данные» —
      760px. При переключении вкладок менялся масштаб всего интерфейса,
      хотя содержимое везде одной формы — карточки со строками
      «подпись — значение».

      Мера растёт вместе с окном и упирается в предел читаемости строки:
      дальше сумма в строке уезжала бы от её содержимого.
    */
    --desktop-content:clamp(
      720px,
      68vw,
      1080px
    );
  }

  main{
    padding-top:calc(84px + env(safe-area-inset-top));
  }

  nav.tabs{
    width:min(calc(100% - 48px),520px);
  }

  .sheet{
    max-width:var(--ui-sheet-max);
  }

  .hero{
    padding:22px 22px 19px;
  }
}

@media (max-width:520px){
  .point-picker,
  .month-picker,
  .date-picker{
    left:6px;
    right:6px;
    bottom:calc(6px + env(safe-area-inset-bottom));
    border-radius:20px;
  }
}

@media (max-width:420px){
  :root{
    --ui-gutter:12px;
  }

  main{
    padding-top:calc(84px + env(safe-area-inset-top));
  }

  .row,
  .sh,
  .manage-row{
    padding-right:12px;
    padding-left:12px;
  }

  nav.tabs{
    width:calc(100% - 16px);
  }

  nav.tabs button{
    padding-right:7px;
    padding-left:7px;
    font-size:12px;
  }

  .date-day{
    height:38px;
  }
}

/* Управление: более собранная геометрия и полноценное окно списка */
nav.tabs{
  border-radius:16px;
}

body main[data-manage-detail="true"]{
  padding-top:calc(72px + 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;
}

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:calc(76px + env(safe-area-inset-bottom));
}

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;
  overflow:hidden;
}

#employeeList .manage-menu,
#pointManageList .manage-menu{
  max-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
  border-radius:var(--ui-radius);
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

@media (max-width:420px){
  body main[data-manage-detail="true"]{
    padding-top:calc(68px + env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/*
  Кнопка — интерактивный элемент, и курсор обязан это показывать.

  Браузер сам ставит на <button> обычную стрелку, поэтому каждая кнопка
  приложения указывала на это отдельной строкой — и там, где строку
  забывали, курсор молча отличался от соседней такой же кнопки. Правило
  одно на все: кроме отключённых, где стрелка как раз и говорит, что
  нажимать нечего.
*/
button:not(:disabled){
  cursor:pointer;
}

button:disabled{
  cursor:default;
}

/*
  Крестик очистки поиска — свой, а не браузерный.

  Системный выглядел чужим: серый кружок другого размера, со своим
  отступом и без курсора-указателя. Здесь он собран из тех же величин,
  что и остальные значки приложения, и подсвечивается по наведению.
  Firefox своего крестика не рисует вовсе — поле там просто чистят
  клавишами, и это одинаково во всех полях.
*/
input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;

  width:16px;
  height:16px;
  margin-left:8px;

  background-color:var(--ink3);

  -webkit-mask:var(--ui-clear-icon) center / 10px 10px no-repeat;
  mask:var(--ui-clear-icon) center / 10px 10px no-repeat;

  cursor:pointer;

  transition:background-color var(--ui-base) ease;
}

@media (hover:hover) and (pointer:fine){
  input[type="search"]::-webkit-search-cancel-button:hover{
    background-color:var(--ink);
  }
}