/* templates/club_adm/schedule.html — сетка расписания клуба (день/неделя).
   Позиционирование — inline-стили из шаблона (top/height в px, посчитаны в
   view по grid_start_min/px_per_hour); здесь только структура и цвета темы. */

.sched-grid { display: flex; min-width: 640px; }

/* Мобильный скролл сетки: нативная инерция + видимая тень справа, пока не
   доскроллили до конца, чтобы было понятно, что сетка не вся видна. */
.adm-wrap { -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .adm-wrap {
    position: relative;
    background:
      linear-gradient(to right, rgb(var(--c-surf)) 0%, transparent 100%) left,
      linear-gradient(to left, rgb(var(--c-surf)) 0%, transparent 100%) right;
    background-size: 16px 100%;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
  }
}

.sched-axis { position: relative; width: 52px; flex-shrink: 0; }
.sched-hour {
  position: absolute; left: 0; right: 6px; transform: translateY(-50%);
  font-size: 11px; color: rgb(var(--c-sub)); text-align: right;
}

.sched-cols { flex: 1; min-width: 0; }

.sched-head { display: flex; border-bottom: 1px solid var(--c-rim); }
.sched-head-cell {
  flex: 1; min-width: 96px; padding: 8px 10px; font-size: 12px;
  border-left: 1px solid var(--c-rim);
}
.sched-head-cell:first-child { border-left: none; }
.sched-head-cell.sched-today { background: rgb(var(--c-tl) / 0.08); }

.sched-body { display: flex; position: relative; }
.sched-col {
  flex: 1; min-width: 96px; position: relative;
  border-left: 1px solid var(--c-rim);
}
.sched-col:first-child { border-left: none; }
.sched-col[data-slot] { cursor: pointer; }

/* «+» под курсором — видимая подсказка про бронь стола/тренировки (клик по
   пустому месту уже открывал модалку на нужном часовом слоте по Y-координате,
   но сама подсказка была position:sticky top:50% — приклеена к центру ВСЕЙ
   колонки дня, а не к слоту под курсором, и выглядела так, будто клик
   работает только там. top задаётся инлайново из JS (club_adm_schedule.js,
   mousemove), 50% здесь — только фолбэк до первого движения мыши. */
.sched-col-add {
  position: absolute; top: 50%; left: 50%; z-index: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px; border: 1px dashed var(--c-rim);
  color: var(--c-sub); font-size: 18px; font-weight: 700; line-height: 1;
  opacity: 0; transition: opacity .12s, border-color .12s, color .12s;
  pointer-events: none;
}
.sched-col:hover .sched-col-add { opacity: 1; }
.sched-col:hover .sched-col-add,
.sched-col:focus-within .sched-col-add {
  border-color: var(--c-or); color: var(--c-or);
}

.sched-ev {
  position: absolute; left: 3px; right: 3px; overflow: hidden;
  border-radius: 8px; padding: 2px 5px; font-size: 11px; line-height: 1.2;
  cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,.15);
  display: flex; flex-direction: column; gap: 1px;
  touch-action: none;   /* жест перетаскивания не скроллит страницу на тач-устройствах */
  user-select: none;    /* мышиный drag по карточке не выделяет текст внутри */
  -webkit-user-select: none;
}
.sched-ev--dragging { cursor: grabbing; }
/* Таймлайн-сетка: перетаскиваемая карточка (drag&drop/swipe-перенос,
   «Расписание тренера») — приподнята и полупрозрачна, поверх соседних. */
.sched-ev--dragging { opacity: .75; z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
/* Время и название — в одной строке: при получасовом слоте (~28px) карточка
   раньше показывала их двумя строками и обрезала «Аренда» по вертикали. */
.sched-ev-row {
  display: flex; align-items: baseline; gap: 5px; min-width: 0;
}
.sched-ev-time  { font-weight: 700; flex-shrink: 0; font-size: 10px; opacity: .85; }
.sched-ev-title {
  font-weight: 600; white-space: nowrap; text-overflow: ellipsis;
  overflow: hidden; min-width: 0; flex: 1;
}
.sched-ev-sub   {
  opacity: .8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
  font-size: 10px;
}

.sched-ev--session { background: rgb(34 197 94 / 0.18); border: 1px solid rgb(34 197 94 / 0.6); color: rgb(21 128 61); }
.sched-ev--booking { background: rgb(59 130 246 / 0.18); border: 1px solid rgb(59 130 246 / 0.6); color: rgb(29 78 216); }
.sched-ev--block   { background: rgb(239 68 68 / 0.16); border: 1px solid rgb(239 68 68 / 0.6); color: rgb(185 28 28); }

/* Занятие, которое ведёт тренер клуба — янтарным, чтобы отличать от обычных
   игр игроков. Групповое тренерское — плюс полосатый левый акцент и подпись. */
.sched-ev--session.sched-ev--coach {
  background: rgb(245 158 11 / 0.18); border-color: rgb(245 158 11 / 0.7); color: rgb(180 83 9);
}
/* Бронь робота (и стол, на котором он стоит) — фиолетовым, чтобы не путать со столом. */
.sched-ev--booking.sched-ev--robot {
  background: rgb(139 92 246 / 0.16); border-color: rgb(139 92 246 / 0.6); color: rgb(109 40 217);
}
.sched-ev--session.sched-ev--group { border-left-width: 4px; border-left-style: double; }
.sched-ev-badge {
  display: inline-block; margin-top: 1px; padding: 0 4px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  border-radius: 4px; background: rgb(245 158 11 / 0.28); color: rgb(146 64 14);
}
.sched-dot--coach { background: rgb(245 158 11); }
.sched-dot--group { background: rgb(245 158 11); border: 2px double rgb(146 64 14); }

.sched-ev-del {
  position: absolute; top: 2px; right: 2px; width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgb(var(--c-bg) / 0.55);
}
.sched-ev-tools { position: absolute; top: 2px; right: 2px; display: flex; gap: 3px; z-index: 2; }
.sched-ev-tools form { display: contents; }
.sched-ev-tools button {
  all: unset; cursor: pointer; width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: rgb(var(--c-bg) / 0.7); color: inherit;
}
.sched-ev-tools button:hover { background: rgb(var(--c-bg)); }
.sched-ev-tools .sched-ev-edit:hover { color: rgb(var(--c-or)); }
.sched-ev-tools form button:hover { color: rgb(var(--c-err)); }
.sched-ev-del button {
  all: unset; cursor: pointer; line-height: 1; font-size: 11px; color: inherit;
}

/* Легенда: точки-маркеры (шаблон уже задаёт w-3 h-3 rounded через Tailwind) —
   те же цвета, что и карточки в сетке (зелёный/синий/красный), не бренд-палитра. */
.sched-dot--session { background: rgb(34 197 94); }
.sched-dot--booking { background: rgb(59 130 246); }
.sched-dot--robot   { background: rgb(139 92 246); }
.sched-dot--block   { background: rgb(239 68 68); }

/* Модалка создания блокировки — вынесена из z-[60]/bg-black/50 (произвольные
   Tailwind-утилиты не гарантированно попадают в собранный tailwind.css без
   ребилда на новый шаблон). */
.sched-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
/* Этот файл подключается в {% block scripts %} — после tailwind.css в <head> —
   поэтому .sched-modal{display:flex} побеждает .hidden{display:none} по порядку
   каскада (равная специфичность, кто позже — тот и победил), и модалка была
   видна сразу при загрузке страницы, а не только после клика по слоту. */
.sched-modal.hidden {
  display: none !important;
}

/* Крестик закрытия баннера в углу карточки: позиция задана здесь, а не классами
   Tailwind (right-2/top-2 нет в собранном tailwind.css, без них крестик уезжал в
   начало строки). Родитель баннера — .onboarding-hint.relative. */
.onboarding-hint.relative { position: relative; }
.banner-x {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer;
  color: rgb(var(--c-sub));
}
.banner-x:hover { color: rgb(var(--c-ink)); }
/* Занятие ждёт подтверждения тренера: слот занят, но не подтверждён — пунктиром. */
.sched-ev--pending { border-style: dashed; opacity: 0.85; }