/*
  Календарь и контроль в разделе «Смены».

  Все правила здесь начинаются с sv- (shift views) и не пересекаются ни
  с чем остальным: представления живут поверх общей вёрстки, а не вместо
  неё. Цвета, радиусы и размеры берутся из общих переменных приложения —
  календарь должен выглядеть частью Shift Register, а не вставкой.

  Раскладка рассчитана прежде всего на desktop: там месяц виден целиком
  и рядом помещается панель дня. На узком экране те же данные идут в
  одну колонку, а клетка дня сжимается до числа и счётчика смен под ним.
*/

/*
  Реестр живёт в нерастущей раскладке: список подгоняется под остаток
  высоты, а соседи должны быть flex:none. Без этого переключатель
  сжимался вместо списка, и список уезжал под нижнюю панель.
*/
main.shifts-layout > .sv-switch{
  flex:none;
}

.sv-switch{
  margin-bottom:12px;
}

/* ===== выбор ПВЗ ===== */

/*
  Строка выбора — та же, что выбирает сотрудника в «Итогах»: слева
  выбранный пункт, справа число его смен. Подпись «Пункт выдачи» уже
  стоит над карточкой, поэтому место подписи в строке занимает само
  название, а не повтор заголовка.
*/
.sv-point-card{
  margin-bottom:12px;
}

.sv-point-row .t{
  flex:1;
  width:auto;
  min-width:0;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--ink);
}

.sv-point-row .point-value{
  flex:none;
  color:var(--ink3);
  font-size:13px;
  letter-spacing:0;
}

.sv-option-count{
  flex:none;
  min-width:22px;

  color:var(--ink3);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  text-align:right;
}

.point-option.on .sv-option-count{
  color:inherit;
}

/* ===== сводка месяца ===== */

.sv-summary-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;

  margin:0 4px 10px 2px;
}

.sv-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 14px;
  min-width:0;

  color:var(--ink3);
  font-size:12.5px;
}

.sv-summary-item b{
  color:var(--ink2);
  font-weight:650;
}

.sv-summary-item.warn b{
  color:var(--rust);
}

.sv-pick-toggle{
  flex:none;
  cursor:pointer;
}

/* ===== раскладка ===== */

.sv-layout{
  display:grid;
  gap:14px;
  align-items:start;
}

@media (min-width:900px){
  .sv-layout{
    grid-template-columns:minmax(0,1fr) 320px;
    align-items:stretch;
  }
}

/* ===== календарь ===== */

.sv-calendar{
  padding:12px;
}

.sv-weekdays,
.sv-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:6px;
}

.sv-weekdays{
  margin-bottom:8px;
}

.sv-weekday{
  padding:2px 4px;

  color:var(--ink3);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}

/*
  Высоту клетки задаёт строка сетки, а не содержимое: день без смен
  ровно такой же, как день с тремя именами, и последняя строка месяца не
  выходит ниже остальных. Всё, что не помещается, клетка обрезает, —
  сколько строк влезает, разметка знает сама.
*/
.sv-grid{
  grid-auto-rows:44px;
}

@media (min-width:900px){
  .sv-grid{
    grid-auto-rows:96px;
  }
}

.sv-day{
  display:flex;
  flex-direction:column;
  gap:4px;

  min-width:0;
  min-height:0;
  padding:5px;
  overflow:hidden;

  border:1px solid var(--line);
  border-radius:12px;

  background:var(--tint-soft);
  color:var(--ink);

  text-align:left;
  cursor:pointer;

  transition:
    background-color var(--ui-base) ease,
    border-color var(--ui-base) ease,
    transform var(--ui-fast) var(--ui-ease);
}

@media (min-width:900px){
  .sv-day{
    padding:6px;
  }
}

.sv-day.outside{
  border-color:transparent;
  background:transparent;
  cursor:default;
}

.sv-day.has{
  border-color:var(--line2);
  background:var(--tint);
}

/*
  Прошедший день без смен — единственное, что подсвечивается цветом:
  ради этого календарь и открывают.
*/
.sv-day.missed{
  border-color:var(--rust-line);
  border-style:dashed;
  background:rgba(190,113,104,.07);
}

.sv-day.ahead{
  border-style:dashed;
  background:transparent;
  opacity:.75;
}

.sv-day.today .sv-day-num{
  color:var(--gold);
  font-weight:700;
}

/*
  Открытый день и отмеченные дни. Сплошная рамка поверх любой другой:
  пунктир прошедшего или будущего дня под выделением читался как
  «наполовину выбран», а приглушённость будущего дня гасила и само
  выделение.
*/
.sv-day.on,
.sv-day.picked{
  border-style:solid;
  border-color:var(--gold-line);
  background:var(--gold-soft);
  opacity:1;
}

/*
  Отмеченный день плотнее открытого: в режиме выбора их много, и каждый
  должен читаться отмеченным и сам по себе, без соседей для сравнения.
*/
.sv-day.picked{
  border-color:var(--gold);
}

@media (hover:hover) and (pointer:fine){
  .sv-day:not(.outside):not(.on):not(.picked):hover{
    border-color:var(--gold-line);
  }
}

.sv-day:not(.outside):active,
.sv-day.touch-active{
  transform:scale(.98);
}

/*
  На телефоне клетка узкая: число и счётчик стоят столбиком по центру,
  а не спорят за одну строку. Число при этом в каждой клетке на одном
  месте — есть под ним счётчик или нет.
*/
.sv-day-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}

@media (min-width:900px){
  .sv-day-head{
    flex-direction:row;
    justify-content:space-between;
    gap:6px;
  }
}

.sv-day-num{
  font-size:13px;
  font-weight:600;
  line-height:16px;
  letter-spacing:-.2px;
}

.sv-day-count{
  min-width:18px;
  padding:1px 5px;
  border-radius:999px;

  background:var(--gold-soft);
  color:var(--gold);

  font-size:11px;
  font-weight:650;
  line-height:13px;
  text-align:center;
}

.sv-day-gap{
  width:6px;
  height:6px;
  margin:4px 0;
  border-radius:50%;
  background:var(--rust);
  opacity:.75;
}

.sv-day-body{
  display:none;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.sv-day-line{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:0;
}

.sv-day-line-main{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--ink2);
  font-size:11px;
  line-height:14px;
}

.sv-day-flag{
  flex:none;
  padding:0 4px;
  border-radius:4px;

  background:var(--tint2);
  color:var(--ink3);

  font-size:9.5px;
  font-weight:600;
  line-height:13px;
}

.sv-day-more,
.sv-day-sum{
  color:var(--ink3);
  font-size:10.5px;
  line-height:13px;
}

.sv-day-sum{
  display:none;
  margin-top:auto;
  font-weight:600;
}

@media (min-width:900px){
  .sv-day-body,
  .sv-day-sum{
    display:flex;
  }
}

.sv-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;

  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--line);

  color:var(--ink3);
  font-size:11.5px;
}

.sv-legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.sv-legend-mark{
  width:12px;
  height:12px;
  border:1px solid var(--line2);
  border-radius:4px;
  background:var(--tint);
}

.sv-legend-mark.missed{
  border-color:var(--rust-line);
  border-style:dashed;
  background:rgba(190,113,104,.10);
}

.sv-legend-mark.ahead{
  border-style:dashed;
  background:transparent;
}

/* ===== панель дня ===== */

.sv-panel{
  padding:14px;
  border:1px solid var(--line);
  border-radius:var(--r);
  background:var(--surf);
}

.sv-panel-empty{
  border-style:dashed;
  background:transparent;
}

.sv-panel-head{
  margin-bottom:10px;
}

.sv-panel-date{
  font-size:16px;
  font-weight:600;
  letter-spacing:-.2px;
}

.sv-panel-sub{
  margin-top:2px;
  color:var(--ink3);
  font-size:12px;
}

.sv-panel-list{
  display:flex;
  flex-direction:column;

  margin:0 -6px 12px;
  /*
    Запас внутри прокрутки: домотав список до конца, последнюю смену
    видно целиком, а не срезанной краем.
  */
  padding-bottom:4px;
  max-height:min(52vh,420px);
  overflow-y:auto;
}

/*
  На desktop панель дня — вторая колонка одной конструкции, а не карточка
  рядом. Её высоту задаёт календарь: сетка тянет обе колонки до общей
  высоты.

  Внутри панель делится на три части: заголовок и кнопка своего размера,
  а всё остальное место занимает список смен — он же и прокручивается,
  когда смен больше, чем помещается. Поэтому кнопка всегда стоит у
  нижнего края, а не там, где закончился список.

  Правила идут после базовых намеренно: у них тот же вес селектора, и
  порядок здесь решает. Раньше блок стоял выше, и базовый max-height
  списка его перебивал — на desktop список упирался в 420px, а под
  кнопкой оставалась пустота во всю оставшуюся высоту.
*/
@media (min-width:900px){
  /*
    Высоту второй колонки задаёт календарь, а не её собственное
    содержимое. Панель вынута из расчёта высоты строки: место занимает
    пустая ячейка, панель разложена по ней целиком. Иначе длинный список
    смен растягивал бы обе колонки, страница уезжала вниз, и прокрутке
    внутри панели взяться было бы неоткуда.
  */
  .sv-panel-slot{
    position:relative;
    min-height:0;
  }

  .sv-panel-slot > .sv-panel{
    position:absolute;
    inset:0;
  }

  .sv-panel{
    display:flex;
    flex-direction:column;
    min-height:0;
  }

  .sv-panel-list{
    flex:1 1 auto;
    min-height:0;
    max-height:none;

    margin-bottom:0;
  }

  .sv-panel-hint{
    flex:1 1 auto;
  }

  .sv-panel-add{
    flex:none;
    margin-top:12px;
  }
}

.sv-panel-hint{
  color:var(--ink3);
  font-size:13px;
  line-height:1.45;
}

.sv-panel-add{
  width:100%;
  margin-top:12px;
}

.sv-panel-note{
  margin-top:8px;
  color:var(--ink3);
  font-size:11.5px;
  line-height:1.4;
}

/* ===== выбор дней ===== */

/*
  Общий флажок стоит над флажками смен: строки списка сдвинуты на 6px
  наружу и имеют отступ строк, флажок — ровно на ту же величину.
*/
.sv-pick-all{
  margin:0 0 8px calc(var(--select-inline) - 6px);
}

/*
  Диапазон с Shift — тихая подсказка внизу пустой панели и только для
  клавиатуры с мышью. Основной сценарий — отметить дни — она не
  перекрикивает.
*/
.sv-pick-tip{
  display:none;
}

@media (hover:hover) and (pointer:fine){
  .sv-pick-tip{
    display:block;
    margin-top:auto;
    padding-top:12px;

    color:var(--ink3);
    font-size:11px;
  }
}

.sv-pick-tip kbd{
  padding:1px 5px;
  border:1px solid var(--line2);
  border-radius:5px;

  font:inherit;
  font-weight:600;
}

.sv-panel-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}

.sv-panel-actions .btn{
  margin-top:0;
}

@media (min-width:900px){
  .sv-panel-actions{
    flex:none;
  }

  .sv-panel-pick .sv-panel-hint{
    flex:none;
  }
}

/* ===== контроль ===== */

.sv-control{
  padding:12px;
}

.sv-control-scroll{
  overflow-x:auto;
}

/*
  Колонки заданы жёстко и одинаково: при table-layout:fixed ширину
  столбца определяет colgroup, а не содержимое, поэтому число дня и
  плитка под ним всегда стоят в одной колонке. Ширина колонки — доля
  остатка, так что выравнивание держится и при 28 днях, и при 31, и при
  любой ширине окна. min-width не даёт колонкам схлопнуться: ниже него
  таблица уходит в горизонтальную прокрутку.
*/
.sv-control table{
  border-collapse:separate;
  border-spacing:3px;
  table-layout:fixed;

  width:100%;
  min-width:calc(
    152px + var(--sv-days,31)*24px
  );
}

.sv-col-name{
  width:152px;
}

.sv-col-day{
  width:calc(
    (100% - 152px)/var(--sv-days,31)
  );
}

.sv-control th,
.sv-control td{
  padding:0;
  font-weight:400;
  text-align:center;
}

.sv-control thead th{
  color:var(--ink3);
  font-size:10.5px;
  font-weight:600;
  text-align:center;
}

.sv-control thead th.today{
  color:var(--gold);
}

.sv-control-point{
  position:sticky;
  left:0;
  z-index:1;

  padding-right:10px !important;

  background:var(--surf);
  text-align:left !important;
}

.sv-control-name{
  display:block;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  color:var(--ink);
  font-size:13px;
  font-weight:550;
}

.sv-control-sub{
  display:block;
  color:var(--ink3);
  font-size:11px;
}

.sv-cell button{
  display:block;
  width:100%;
  max-width:22px;
  height:26px;
  margin:0 auto;

  border:1px solid var(--line);
  border-radius:6px;

  background:var(--tint-soft);
  color:var(--ink3);

  font-size:10.5px;
  font-weight:600;
  cursor:pointer;
}

.sv-cell.has button{
  border-color:var(--gold-line);
  background:var(--gold-soft);
  color:var(--gold);
}

.sv-cell.missed button{
  border-color:var(--rust-line);
  border-style:dashed;
  background:rgba(190,113,104,.10);
}

.sv-cell.ahead button{
  border-style:dashed;
  opacity:.5;
}

.sv-cell.today button{
  box-shadow:0 0 0 1px var(--gold-line);
}

.sv-control-sub b{
  font-weight:600;
}

.sv-control-sub b.warn{
  color:var(--rust);
}