/* ==========================================================================
   Расписание смен — свёрстано по артборду «22 Расписание.dc.html».
   Значения (цвета, размеры, отступы) взяты из инлайн-стилей макета.
   ========================================================================== */

/* --------------------------------------------------------------- легенда */
.sleg {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--tx-dim-2); margin-bottom: 18px;
}
.sleg__i { display: inline-flex; align-items: center; gap: 8px; }
.sleg__chip {
  display: grid; place-items: center;
  width: 42px; height: 22px; border-radius: 5px;
}
.sleg__chip--day { background: #2fa96e; border: 1px solid #2fa96e; color: #0c2419; }
.sleg__chip--night { background: #1c5f43; color: #a5e6c4; }
/* ---------------------------------------------------------------- таблица */
/* Ширина сетки зависит от того, на сколько дней заполнено расписание:
   в макете было десять дней, сейчас показываем две недели. Число дней
   приходит инлайном из сборки — --sdays и готовый список колонок --stracks;
   значения ниже страхуют на случай, если разметка их не поставила.
   Считать колонки в CSS нельзя: repeat() требует числа, а не calc(). */
.sscroll {
  --swho: 270px;                          /* колонка с именами мастеров */
  --scell: 56px;                          /* минимум на одну колонку смены */
  --sdays: 10;
  --stracks: repeat(20, minmax(0, 1fr));
  overflow-x: auto;
  border: 1px solid var(--bd-20);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.sscroll::-webkit-scrollbar { height: 6px; }
.sscroll::-webkit-scrollbar-thumb { background: var(--bd-30); border-radius: 6px; }

.stbl {
  display: grid;
  grid-template-columns: var(--swho) var(--stracks);
  min-width: calc(var(--swho) + var(--sdays) * 2 * var(--scell));
  background: var(--surface);
}

/* шапка: дни */
.stbl__corner {
  display: flex; align-items: center; padding: 12px 22px; color: var(--tx-faint);
}
.stbl__corner--blank { padding: 0; }
.sday {
  grid-column: span 2;
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  line-height: 1.2; padding: 12px 6px;
  border-left: 1px solid var(--bd-14);
  transition: background .15s;
}
.sday__wd { color: var(--tx-mute-2);
}
.sday__d { color: #9a8781; }
.sday.is-weekend .sday__wd { color: #d3c4b8; }
.sday.is-today { background: rgba(230, 190, 152, .1); }
.sday.is-today .sday__wd { color: var(--acc-lt); }
.sday.is-hot { background: rgba(230, 190, 152, .13); }
.sday.is-hot .sday__wd { color: var(--tx-hi); }

/* шапка: смены */
.stbl--shifts { border-bottom: 1px solid var(--bd-20); }
.sshift {
  text-align: center; padding: 0 4px 8px;
  color: #8f7c76;
  transition: color .15s, background .15s;
}
.sshift--day { border-left: 1px solid var(--bd-14); }
.sshift.is-today { background: rgba(230, 190, 152, .1); }
.sshift.is-hot { color: var(--tx-hi); background: rgba(230, 190, 152, .16); }

/* строка мастера */
.srow { border-top: 1px solid var(--bd-10); }
.srow--alt { background: #120c0f; }
.srow__who { display: flex; align-items: center; gap: 13px; padding: 9px 22px; color: inherit; }
a.srow__who:hover .srow__name { color: var(--acc-lt); }
.srow__ava {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg) center/cover no-repeat; display: block;
}
.srow__txt { min-width: 0; display: flex; flex-direction: column; }
.srow__top { display: flex; align-items: center; gap: 8px; }
.srow__name { color: var(--tx-white); white-space: nowrap;
  transition: color .15s;
}
.srow__meta { white-space: nowrap; color: var(--tx-faint); }
.srow__meta--now { color: #2fa96e; }

/* клетка смены */
.scell {
  padding: 5px 4px; display: flex; align-items: center;
  transition: background .15s;
}
.scell--day { border-left: 1px solid var(--bd-14); }
.scell.is-today { background: rgba(230, 190, 152, .07); }
.scell.is-hot { background: rgba(230, 190, 152, .13); }

.sslot {
  flex: 1; height: 38px; border: 1px solid transparent; padding: 0;
  border-radius: 5px;
  font-family: var(--font);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease, background .16s ease;
}
.sslot--off { color: transparent; background: rgba(230, 190, 152, .05); cursor: default; }
.sslot--off:hover { background: rgba(230, 190, 152, .12); }
.sslot--on { cursor: pointer; }
.sslot--on.sslot--d { color: #0c2419; background: #2fa96e; }
.sslot--on.sslot--n { color: #a5e6c4; background: #1c5f43; }
.sslot--on:hover, .sslot--on:focus-visible {
  filter: brightness(1.12); transform: scale(1.09);
  box-shadow: 0 6px 16px rgba(47, 169, 110, .34);
}

.snote { color: var(--tx-faint); margin: 18px 0 0; }

/* демо-предупреждение: видно только в сборке с --demo-schedule */
.sdemo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px; padding: 14px 18px;
  border: 1px solid rgba(217, 138, 106, .45); border-radius: var(--r);
  background: rgba(217, 138, 106, .1); color: #e8b79f;
}


/* ------------------------------------------------- прокрутка таблицы */
/* Колонка с мастерами прилипает к левому краю: при прокрутке вправо
   без неё непонятно, чья это строка. */
.stbl__corner, .srow__who {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
}
.srow--alt .srow__who { background: var(--surface-2, #17120f); }
.stbl__corner::after, .srow__who::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0;
  width: 1px; background: var(--bd-14);
}

.sarrows { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sarrow {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  border: 1px solid var(--bd-25); background: transparent;
  color: var(--tx-soft); cursor: pointer;
  transition: border-color .15s, color .15s, opacity .15s;
}
.sarrow:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }
.sarrow:disabled { opacity: .3; cursor: default; }
.sarrow[hidden] { display: none; }

/* ------------------------------------------------------------ адаптив */
/* Размеры текста — из ролей типографики (styles.css). Исключение — уменьшения
   ниже: сетка смен на телефоне должна поместиться в ширину экрана. */
@media (max-width: 900px) {
  /* На узком экране колонка мастера съедала треть ширины, и от самого
     расписания не оставалось места. Ужимаем её и сами ячейки. */
  .sscroll { --swho: 132px; --scell: 47px; }
  .stbl__corner { padding: 10px 12px; font-size: 9px; letter-spacing: .12em; }
  .srow__who { gap: 9px; padding: 8px 12px; }
  .srow__ava { width: 30px; height: 30px; }
  .srow__name { font-size: 14px; }
  .srow__meta { font-size: 10px; }
  .sday { padding: 10px 4px; gap: 4px; }
  .sday__wd, .sday__d { font-size: 11px; }
}

@media (max-width: 560px) {
  /* Аватар убираем: в колонке шириной чуть больше ста пикселей он съедал
     место, и подпись «сегодня в салоне» обрезалась на полуслове. */
  .sscroll { --swho: 116px; --scell: 37px; }
  .srow__ava { display: none; }
  .srow__who { gap: 0; padding: 8px 10px; }
  .srow__name { font-size: 13px; }
  .srow__meta { font-size: 9.5px; }
}