/* calendar.css — Calendar · toolbar + week/day/month grid (tool-style) */

/* ── Toolbar ──
   Слева — навигационный кластер «‹ [Период] ›» (стрелки вплотную к периоду);
   справа — «Сегодня» + переключатель вида. Все контролы единой высоты/шрифта. */
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-7);
  border-bottom: 1px solid var(--ink-200);
  background: var(--white);
}

/* Навигационный кластер: стрелка ‹  Период  › стрелка */
.cal-nav { display: inline-flex; align-items: center; gap: var(--sp-2); }
/* Период получает стабильный слот по центру, чтобы смена периода
   не сдвигала стрелки. */
.cal-nav .period {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  margin: 0;
  flex: 0 0 auto;
  min-width: 240px;
  text-align: center;
  white-space: nowrap;
}

.cal-toolbar-actions { display: inline-flex; align-items: center; gap: var(--sp-3); }

/* Единая высота и типографика всех контролов тулбара (устраняем разнобой
   высот/шрифтов между «Сегодня», сегментом и стрелками). */
.cal-toolbar .cal-nav-btn,
.cal-toolbar #cal-today,
.cal-toolbar .segment { height: 34px; box-sizing: border-box; }
.cal-nav-btn {
  width: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  color: var(--ink-600);
}
.cal-nav-btn:hover { color: var(--ink-950); background: var(--ink-100); }
.cal-toolbar #cal-today {
  padding: 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.cal-toolbar .segment button {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--sp-4);
}
.cal-toolbar .kicker { color: var(--ink-400); }

/* ── Grid shell ── */
#cal-grid { overflow-x: auto; --cal-header-h: 62px; }
.cal-week {
  display: grid;
  grid-template-columns: 56px repeat(7, minmax(120px, 1fr));
  --hour-height: 56px;
  min-width: 720px;
}
.cal-week.is-day { grid-template-columns: 56px 1fr; min-width: 0; }
.cal-month { display: block; }

/* Day headers — единая высота и типографика во всех видах.
   Фон работает как прогресс-бар дня: слой-заливка (::before) поднимается
   снизу вверх на --done-pct (доля выполненных задач). При 100% —
   «наградное» состояние .is-complete. */
.cal-day-header {
  position: relative;
  box-sizing: border-box;
  min-height: var(--cal-header-h);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--ink-150);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
}
.cal-day-header.has-progress::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--done-pct, 0%);
  background: linear-gradient(to top, var(--lime-200), var(--lime-100));
  opacity: 0.9;
  transition: height var(--dur-3) var(--ease-out), background var(--dur-2);
  pointer-events: none;
  z-index: 0;
}
/* Содержимое — поверх заливки */
.cal-day-header > * { position: relative; z-index: 1; }
/* Награда за 100%: насыщенная lime-заливка + мягкое проявление */
.cal-day-header.is-complete::before {
  background: linear-gradient(to top, var(--lime), var(--lime-200));
  opacity: 1;
  animation: cal-day-reward var(--dur-3) var(--ease-out);
}
@keyframes cal-day-reward {
  0%   { filter: saturate(1); }
  40%  { filter: saturate(1.5) brightness(1.04); }
  100% { filter: saturate(1); }
}
.cal-corner { border-right: 1px solid var(--border); }
.cal-day-header .wd {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  line-height: 1;
}
.cal-day-header .num {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: 1.1;
  width: fit-content;
}
.cal-day-header.is-today .num {
  color: var(--accent);
  background: var(--lime);
  border-radius: var(--r-1);
  padding: 0 6px;
}

/* Подпись прогресса дня (сам бар — это фон заголовка, см. .cal-day-header) */
/* Подпись прогресса — в правом верхнем углу шапки, вне потока: она не должна
   раздвигать шапку дня и сдвигать сетку (родитель уже position:relative). */
.cal-dayprog {
  position: absolute;
  top: 3px; right: 5px;
  display: flex; align-items: center; gap: var(--sp-1);
}
.cal-dayprog-label {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-400);
  letter-spacing: 0.02em;
}
.cal-dayprog-label b { font-weight: 600; color: inherit; }
.cal-dayprog.has-done .cal-dayprog-label b { color: var(--ink-900); }
.cal-dayprog.is-complete .cal-dayprog-label { color: var(--lime-600); }
.cal-dayprog-reward { color: var(--lime-600); }

/* Hours column */
.cal-hours-col { border-right: 1px solid var(--ink-200); }
.cal-hour-row {
  height: var(--hour-height);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-400);
  border-top: 1px solid var(--ink-150);
  padding: 2px 6px 0 0;
  text-align: right;
}

/* Day columns + slots */
.cal-day-col { position: relative; border-right: 1px solid var(--ink-150); }
.cal-slot { height: calc(var(--hour-height) / 2); border-top: 1px solid var(--ink-150); }
.cal-slot:nth-child(odd) { border-top-style: dashed; }
.cal-slot:hover { background: var(--ink-50); cursor: pointer; }
.cal-day-col.is-dragging { background: rgba(197,255,26,0.05); }

/* ── Events ── */
.cal-event {
  position: absolute;
  left: 4px; right: 4px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-flat);
  padding: 4px 6px 4px 8px;
  cursor: grab;
  transition: box-shadow var(--dur-1), opacity var(--dur-1);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cal-event:hover { box-shadow: var(--shadow-card); border-color: var(--ink-300); z-index: 3; }
.cal-event:active { cursor: grabbing; }
.cal-event.is-resizing { box-shadow: var(--shadow-card-hover); border-color: var(--lime-600); z-index: 20; opacity: 0.95; }

/* Цветовая метка клиента — уголок в верхнем левом углу (вместо шаблонной
   полоски во всю высоту). Родитель overflow:hidden обрезает по радиусу. */
.cal-event::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: var(--event-color, var(--ink-300)) transparent transparent transparent;
  pointer-events: none;
}
.cal-event.is-done::before { opacity: 0.35; }

/* Ручки растягивания (верх/низ грани). z-index ниже .ev-check (4), чтобы
   чек-контрол в углу оставался кликабельным; появляются заметнее по ховеру. */
.ev-resize {
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  z-index: 3;
  cursor: ns-resize;
  touch-action: none;
}
.ev-resize-top { top: 0; }
.ev-resize-bottom { bottom: 0; }
.ev-resize::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--ink-400);
  opacity: 0;
  transition: opacity var(--dur-1);
}
.ev-resize-top::after { top: 1px; }
.ev-resize-bottom::after { bottom: 1px; }
.cal-event:hover .ev-resize::after,
.cal-event.is-resizing .ev-resize::after { opacity: 0.7; }

/* Заголовок — главный, читаемый; время — вторично; клиент — тонкий акцент */
.ev-title {
  order: 1;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.25;
  padding-right: 16px; /* место под чек-контрол в углу */
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-time {
  order: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-500);
  line-height: 1.25;
  white-space: nowrap;
}
.ev-client {
  order: 3;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-600);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-400);
}

/* 1-клик «готово» — кружок-чекбокс в углу карточки */
.ev-check {
  position: absolute;
  top: 3px; right: 3px;
  width: 16px; height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid var(--ink-300);
  border-radius: 50%;
  background: var(--white);
  color: transparent;
  cursor: pointer;
  transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1);
  z-index: 4;
  touch-action: none;
}
.ev-check:hover { border-color: var(--lime-600); color: var(--ink-400); }
.ev-check.is-checked {
  background: var(--lime);
  border-color: var(--lime-600);
  color: var(--accent);
}

/* Компактная карточка (короткие события ~30 мин): места хватает только на
   название — показываем его одной строкой по центру, время/клиент скрываем
   (время и так читается по вертикальной позиции карточки). */
.cal-event.is-compact { justify-content: center; gap: 0; padding-top: 2px; padding-bottom: 2px; }
.cal-event.is-compact .ev-title { white-space: nowrap; line-height: 1.2; }
.cal-event.is-compact .ev-time,
.cal-event.is-compact .ev-client { display: none; }

/* Состояние «выполнено» — мягкий lime-фон читается как завершение, а не просто «погашено» */
.cal-event.is-done { background: var(--lime-100); border-color: var(--lime-200); opacity: 0.85; }
.cal-event.is-done .ev-title { text-decoration: line-through; color: var(--ink-500); font-weight: 500; }
.cal-event.is-done .ev-time, .cal-event.is-done .ev-client { color: var(--ink-400); }

/* Now line */
.current-time { position: absolute; left: 0; right: 0; height: 2px; background: var(--lime-600); z-index: 5; }
.current-time::before {
  content: "";
  position: absolute;
  left: -3px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime-600);
}

/* Drag-to-create ghost */
.cal-ghost {
  background: var(--lime-100);
  border: 1px dashed var(--lime-600);
  border-left: 3px solid var(--lime-600);
  color: var(--ink-700);
  cursor: default;
}
.ghost-time { font-family: var(--font-mono); font-size: var(--fs-xs); display: block; }
.ghost-label { font-size: var(--fs-xs); display: block; }

/* ── Month grid ── */
/* minmax(0,1fr): без этого длинная задача (white-space:nowrap) распирает свою
   колонку и вся неделя «плавает» по ширине. min-width:0 у ячейки — та же защита. */
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--ink-200); }
.month-grid-header {
  box-sizing: border-box;
  min-height: var(--cal-header-h);
  padding: var(--sp-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--ink-150);
}
.month-cell {
  min-width: 0;
  min-height: 104px;
  padding: var(--sp-2);
  border-right: 1px solid var(--ink-150);
  border-bottom: 1px solid var(--ink-150);
  cursor: pointer;
  transition: background var(--dur-1);
}
.month-cell:hover { background: var(--ink-50); }
.month-cell.is-other-month { background: var(--ink-50); color: var(--ink-400); }
.month-cell.is-today .month-num { color: var(--accent); background: var(--lime); border-radius: var(--r-1); padding: 0 5px; }
.month-num { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; width: fit-content; }

.month-chip {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-xs);
  padding: 1px 5px;
  border-left: 2px solid var(--ink-300);
  border-radius: 2px;
  margin-top: 3px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--ink-50);
}
.month-chip:hover { background: var(--ink-100); }
.month-chip.is-done { opacity: 0.55; }
.month-chip .chip-time { font-family: var(--font-mono); color: var(--ink-500); }
.month-more { font-size: var(--fs-xs); color: var(--ink-500); cursor: pointer; margin-top: 3px; padding-left: 5px; }
.month-more:hover { color: var(--ink-900); }

/* ── Тёмная тема: приглушённый зелёный ──
   Яркие --lime-100/200 (светло-салатовые) не переопределяются в тёмной палитре
   и на тёмном фоне «выжигают» текст. Здесь заменяем плашки выполненного и
   заливку-прогресс на полупрозрачный lime поверх тёмной поверхности — акцент
   сохраняется, но текст остаётся читаемым. Чек-контрол и «сегодня» получают
   тёмную галочку/цифру на лаймовом кружке. */
:root[data-theme="dark"] .cal-day-header.has-progress::before {
  background: linear-gradient(to top, rgba(197, 255, 26, 0.18), rgba(197, 255, 26, 0.06));
  opacity: 1;
}
:root[data-theme="dark"] .cal-day-header.is-complete::before {
  background: linear-gradient(to top, rgba(197, 255, 26, 0.36), rgba(197, 255, 26, 0.16));
}
:root[data-theme="dark"] .cal-event.is-done {
  background: rgba(197, 255, 26, 0.09);
  border-color: rgba(197, 255, 26, 0.26);
  opacity: 1;
}
:root[data-theme="dark"] .cal-event.is-done .ev-title { color: var(--ink-700); }
:root[data-theme="dark"] .cal-event.is-done .ev-time,
:root[data-theme="dark"] .cal-event.is-done .ev-client { color: var(--ink-600); }
/* Тёмная галочка/цифра на лаймовом кружке-акценте (в тёмной теме --accent светлый) */
:root[data-theme="dark"] .ev-check.is-checked { color: #131313; }
:root[data-theme="dark"] .cal-day-header.is-today .num,
:root[data-theme="dark"] .month-cell.is-today .month-num { color: #131313; }
:root[data-theme="dark"] .cal-ghost { background: rgba(197, 255, 26, 0.12); color: var(--ink-800); }