/* Вид календаря: сетка, месяц, расписание, правая колонка.
   Общий файл для страницы календаря и страницы доступа по ссылке. */
/* ── Переключатель видов ───────────────────────────────── */
.views{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.views button{border:0;background:#fff;padding:8px 14px;font-size:14px;font-family:inherit;
 cursor:pointer;color:var(--text);border-right:1px solid var(--line)}
.views button:last-child{border-right:0}
.views button.active{background:var(--accent);color:#fff}
/* Отступ как у остальных кнопок в шапке, но со стороны шеврона он меньше:
   так стрелка уходит к краю, а подпись остаётся на месте. */
.btn.nav{padding:8px 12px;gap:9px;align-items:center}
#prev{padding-left:7px}
#next{padding-right:7px}
/* Шеврон тоньше и мельче обычного текста, поэтому кегль заметно больше.
   Глиф сидит выше базовой линии, из-за чего кажется опущенным — центрируем
   его отдельным флекс-боксом и компенсируем сдвиг. */
.btn.nav .arrow{
  display:inline-flex;align-items:center;justify-content:center;
  /* Высота контейнера меньше кегля: глиф рисуется крупно, но кнопку
     не растягивает — её габариты остаются как у соседних. */
  font-size:40px;line-height:1;height:18px;width:14px;font-weight:600;
  color:var(--accent);transform:translateY(-5px)
}
.btn.nav:hover .arrow{color:var(--accentDark)}
.nav-label{font-size:14px}
/* На узком экране подписи не помещаются — остаются стрелки с подсказками. */
@media(max-width:900px){
  .nav-label{display:none}
  .btn.nav{padding:6px 15px}
}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}
.period{font-size:17px;font-weight:700}
.legend{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}
.calendar-panel{overflow:hidden}
/* Левая колонка с часами: ширину знают и сетка, и её минимальный размер. */
.timegrid{--gut:56px}

/* ── Часовая сетка ─────────────────────────────────────── */
.grid-head{display:grid;border-bottom:1px solid var(--line);background:#fafbfc}
.grid-head .gut{border-right:1px solid var(--line)}
.grid-head .dh{padding:9px 6px;text-align:center;border-right:1px solid var(--line);cursor:pointer}
.grid-head .dh:last-child{border-right:0}
.dh.weekend{background:var(--weekend)}
.dh.today .dnum{background:var(--accent);color:#fff;border-radius:50%;width:26px;height:26px;
 display:inline-flex;align-items:center;justify-content:center}
.dname{font-size:12px;color:var(--muted);text-transform:lowercase}
.dnum{font-size:16px;font-weight:700;margin-top:2px;display:inline-block;line-height:26px}

.scroller{max-height:640px;overflow:auto;position:relative}
.grid{display:grid;position:relative}
.gut-col{border-right:1px solid var(--line)}
.hour{height:52px;position:relative}
.hour span{position:absolute;top:-8px;right:7px;font-size:11px;color:var(--muted);background:#fff;padding:0 2px}
.daycol{position:relative;border-right:1px solid var(--line);
 background-image:repeating-linear-gradient(to bottom,var(--hourLine) 0 1px,transparent 1px 52px)}
.daycol:last-child{border-right:0}
.daycol.weekend{background-color:var(--weekend)}
.daycol.today{background-color:#f7fbff}
.daycol.editable{cursor:copy}
.ev{position:absolute;border-radius:7px;padding:4px 7px;overflow:hidden;cursor:pointer;
 font-size:12px;line-height:1.3;border-left:3px solid;min-height:20px;
 /* Белый контур отделяет вложенное событие от того, поверх чего оно лежит. */
 box-shadow:0 0 0 1px #fff,0 1px 3px rgba(16,24,40,.14)}
/* Событие на весь день — подложка для остальных: без тени и бледнее. */
.ev.all-day{box-shadow:none;border-radius:0 7px 7px 0}
.ev:hover{filter:brightness(.97)}
.ev .t{font-weight:700;font-size:11px;opacity:.85}
.ev .n{font-weight:600;word-break:break-word}
/* Служба, место и описание: показываются, если блок высокий. Лишнее
   обрезает сам блок (overflow:hidden) — видно столько, сколько влезло. */
.ev .s{font-size:11px;margin-top:2px;font-weight:600;opacity:.75;
 text-transform:uppercase;letter-spacing:.03em}
.ev .p{font-size:11px;margin-top:2px;opacity:.9}
.ev .d{font-size:11px;margin-top:2px;opacity:.72;word-break:break-word}
.nowline{position:absolute;left:0;right:0;height:2px;background:var(--now);z-index:2;pointer-events:none}
.nowline:before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;
 border-radius:50%;background:var(--now)}

/* ── Месяц ─────────────────────────────────────────────── */
.month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.month .wd{padding:8px;text-align:center;font-size:12px;color:var(--muted);background:#fafbfc;
 border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-transform:lowercase}
.month .wd:nth-child(7n){border-right:0}
.mcell{min-height:112px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);
 padding:6px;display:flex;flex-direction:column;gap:3px}
.mcell:nth-child(7n){border-right:0}
.mcell.out{background:#fbfcfd;color:#aeb6bf}
.mcell.weekend{background:var(--weekend)}
.mcell .num{font-size:13px;font-weight:700;align-self:flex-end;line-height:22px;min-width:22px;
 text-align:center;cursor:pointer}
.mcell.today .num{background:var(--accent);color:#fff;border-radius:50%;height:22px}
.chip{font-size:11.5px;padding:2px 6px;border-radius:5px;cursor:pointer;white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis;border-left:3px solid}
.more{font-size:11px;color:var(--muted);cursor:pointer;padding-left:3px}
.more:hover{text-decoration:underline}

/* ── Расписание ────────────────────────────────────────── */
.sched{padding:4px 0 10px}
.sdiv{display:flex;align-items:center;gap:10px;padding:12px 16px 8px}
.sdiv:before,.sdiv:after{content:"";flex:1;height:1px;background:var(--line)}
.sdiv span{font-size:12.5px;color:var(--muted);background:#f1f4f7;padding:3px 11px;
 border-radius:20px;white-space:nowrap}
.sdiv.today span{background:var(--accent);color:#fff}
.srow{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:center;
 padding:11px 16px;border-top:1px solid #f2f4f6;cursor:pointer}
.srow:hover{background:#fafbfc}
.stime{font-size:13px;color:var(--muted);white-space:nowrap}
.sname{display:flex;align-items:center;gap:9px;font-size:14px;min-width:0}
.sname i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.sname span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfree{padding:6px 16px 4px}
.free-note{font-size:12px;color:var(--freeText);background:var(--free);border:1px solid #d2ead8;
 border-radius:7px;padding:5px 9px;display:inline-block}
.empty{color:var(--muted);font-size:13px;padding:26px 16px;text-align:center}

/* ── Правая колонка ────────────────────────────────────── */
.side{display:flex;flex-direction:column;gap:12px}
.mini{padding:12px}
.mini-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mini-title{font-size:14px;font-weight:700}
.mini-nav{display:flex;gap:3px}
.mini-nav button{border:1px solid var(--line);background:#fff;border-radius:7px;width:26px;
 height:26px;cursor:pointer;font-size:13px;line-height:1;color:var(--muted);padding:0}
.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.mini-grid div{text-align:center;font-size:12px;padding:5px 0;border-radius:6px;position:relative}
.mini-grid .wd{color:var(--muted);font-size:11px;text-transform:lowercase}
.mini-grid .d{cursor:pointer}
.mini-grid .d:hover{background:#eef2f6}
.mini-grid .d.out{color:#c3c9d0}
.mini-grid .d.today{background:var(--accent);color:#fff;font-weight:700}
.mini-grid .d.sel{outline:2px solid var(--accent);outline-offset:-2px;font-weight:700}
.mini-grid .d.has:after{content:"";position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
 width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.75}
.mini-grid .d.today.has:after{background:#fff}
.side-box{padding:12px 14px;font-size:13px;color:var(--muted);line-height:1.55}
.side-box h3{margin:0 0 7px;font-size:14px;color:var(--text)}
.side-box b{color:var(--text)}

/* ── Карточка события ──────────────────────────────────── */
.field{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;padding:7px 0;font-size:14px}
.field dt{color:var(--muted);font-size:13px}
.field dd{margin:0;word-break:break-word;line-height:1.5}
.desc{white-space:pre-wrap}
/* Цвет события — это служба, поэтому кружки подписаны: без подписи
   выбор превращался в угадывание, что значит оранжевый. */
.colors{display:flex;flex-direction:column;gap:5px}
.colors .swatch{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
 background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 10px;
 font-size:13.5px;font-family:inherit;color:var(--text);cursor:pointer}
.colors .swatch:hover{border-color:#c6ced6}
.colors .swatch i{width:14px;height:14px;border-radius:4px;flex:0 0 auto}
.colors .swatch.sel{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.note{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.5}

@media(max-width:1080px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .side{flex-direction:row;flex-wrap:wrap}
  .side>.panel{flex:1;min-width:250px}
}
@media(max-width:760px){
  .scroller{max-height:70vh}
  .mcell{min-height:74px}
  .chip{font-size:10.5px;padding:1px 4px}
  .srow{grid-template-columns:1fr;gap:4px}
  .views{width:100%}
  .views button{flex:1;padding:8px 6px}
  .toolbar{width:100%}

  /* Семь колонок на ширину телефона не влезают: вместо того чтобы
     сплющивать их до нечитаемых полосок, даём сетке нижний предел
     ширины и прокручиваем её вбок целиком — вместе с шапкой дней. */
  #viewBox{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .timegrid{--gut:46px;min-width:calc(var(--gut) + var(--cols) * 104px)}

  /* Один день в колонку — прокручивать нечего. */
  .timegrid.one-day{min-width:100%}

  .dnum{font-size:15px}
  .ev{padding:3px 5px;border-left-width:3px}
  .ev .t{font-size:10px}
  .ev .n{font-size:11.5px;overflow-wrap:anywhere;hyphens:none}
  .hour span{font-size:10px;right:5px}

}

/* ── Дела без даты ─────────────────────────────────────── */
.plan-list{padding:8px;display:flex;flex-direction:column;gap:7px;max-height:320px;overflow:auto}
.plan-empty{color:var(--muted);font-size:12.5px;padding:6px 5px;line-height:1.5}
.plan-card{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:9px;
 padding:7px 9px;cursor:pointer;background:#fff}
.plan-card:hover{border-color:#c6ced6}
.plan-card.dragging{opacity:.5}
.plan-card .pt{font-size:13px;font-weight:600;line-height:1.35;word-break:break-word}
.plan-card .pm{font-size:12px;color:var(--muted);margin-top:2px}
.plan-card .pm b{color:var(--danger);font-weight:600}
.plan-card.hot{background:#fffaf5}
/* Колонка дня, над которой держат карточку. */
.daycol.drop{outline:2px dashed var(--accent);outline-offset:-3px}

.slots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.slots button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;
 font-size:13px;font-family:inherit;cursor:pointer;color:var(--text)}
.slots button:hover{border-color:var(--accent);color:var(--accent)}