/* ============================================================
   Дашборд менеджеров. Дополняет styles.css (те же токены).

   Состояния ячеек различаются НЕ ТОЛЬКО цветом (WCAG color-not-only):
   бронь — имя клиента, блокировка — причина, свободно — знак «+»,
   не работает — штриховка.
   ============================================================ */

.admin { background: var(--lav-2); min-height: 100vh; }

/* ─── Вход ─── */
.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: var(--space-4); }
.login-card { width: 100%; max-width: 380px; }

/* ─── Шапка ─── */
.admin-header { background: var(--grad-hero); color: var(--on-dark); padding: var(--space-4) 0; }
.admin-bar {
  max-width: 1400px; margin: 0 auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
}
.admin-actions { display: flex; align-items: center; gap: var(--space-2); }
.admin-header .logo img { height: 32px; }

.pill {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4);
  border-radius: var(--r-pill); font-size: 14px; font-weight: 500;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.pill-ok    { background: rgba(255,255,255,.16); color: var(--on-dark); }
.pill-warn  { background: var(--gold); color: #3B2A00; font-weight: 600; }
.pill-user  { background: rgba(255,255,255,.10); color: var(--on-dark-mut); }
.pill-ghost { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.35); }
.pill-ghost:hover { background: rgba(255,255,255,.14); }

.admin-main { max-width: 1400px; margin: 0 auto; padding: var(--space-5) var(--gutter) var(--space-9); }

/* ─── Навигация по дням ─── */
.day-nav { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
.day-title { display: flex; flex-direction: column; min-width: 220px; }
.day-title strong { font-family: var(--font-display); font-size: 20px; text-transform: capitalize; }
.day-title span { color: var(--muted); font-size: 13px; }
.btn-sm { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.day-picker {
  min-height: 40px; padding: 0 var(--space-3); font: inherit; font-size: 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink);
  margin-left: auto;
}

/* ─── Сетка ─── */
.grid-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); overflow-x: auto;
}
.grid { border-collapse: collapse; width: 100%; min-width: 720px; }
.grid th, .grid td { border-bottom: 1px solid var(--line-soft); }
.grid thead th {
  background: var(--lav); color: var(--ink); font-size: 13px; font-weight: 600;
  padding: var(--space-3) var(--space-2); text-align: center;
  font-variant-numeric: tabular-nums; position: sticky; top: 0; z-index: 2;
}
.corner { text-align: left !important; padding-left: var(--space-4) !important; min-width: 190px; }

.row-head {
  text-align: left; padding: var(--space-3) var(--space-4);
  background: #fff; position: sticky; left: 0; z-index: 1;
  border-right: 1px solid var(--line);
}
.row-name { display: block; font-weight: 600; font-size: 15px; }
.row-meta { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.cell { padding: 4px; text-align: center; vertical-align: middle; }
.cell-btn {
  width: 100%; min-height: 60px; border: 1.5px solid transparent; border-radius: var(--r-md);
  font: inherit; cursor: pointer; padding: 6px 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cell-name { font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.cell-meta { font-size: 11px; opacity: .8; }

/* свободно */
.cell-free .cell-btn { background: #fff; border-color: var(--line); color: var(--muted); }
.cell-free .cell-btn:hover { border-color: var(--primary); background: var(--lav-2); color: var(--primary); }
.plus { font-size: 20px; line-height: 1; }

/* зум */
.cell-booking .cell-btn { background: var(--good-bg); border-color: #BFE3D0; color: #0F5334; text-align: left; }
.cell-booking .cell-btn:hover { border-color: var(--good); }
/* зум, где менеджер — співучасник (не основной): тот же слот, пунктир */
.cell-co .cell-btn { border-style: dashed; opacity: .92; }

/* занято */
.cell-block .cell-btn { background: #FDF2F7; border-color: #F0D2E2; color: #8E2A57; }
.cell-block .cell-btn:hover { border-color: var(--alert); }

/* не работает — штриховка, не только цвет */
.cell-off {
  background: repeating-linear-gradient(135deg, #FAFAFB, #FAFAFB 6px, #F2F2F4 6px, #F2F2F4 12px);
}

/* ─── Легенда ─── */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); color: var(--muted); font-size: 13px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid; display: inline-block; }
.sw-free    { background: #fff; border-color: var(--line); }
.sw-booking { background: var(--good-bg); border-color: #BFE3D0; }
.sw-block   { background: #FDF2F7; border-color: #F0D2E2; }
.sw-off     { background: repeating-linear-gradient(135deg,#FAFAFB,#FAFAFB 3px,#F2F2F4 3px,#F2F2F4 6px); border-color: #E8E8EC; }

/* ─── Инструменты ─── */
.tools { margin-top: var(--space-6); }
.tool-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-5); max-width: 720px; }
.tool-card h3 { font-size: 17px; margin-bottom: 4px; }
.tool-hint { color: var(--muted); font-size: 13px; margin-bottom: var(--space-4); }
.tool-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tool-row select {
  min-height: 44px; padding: 0 var(--space-3); font: inherit; font-size: 15px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink); flex: 1 1 180px;
}
.tool-out {
  display: block; margin-top: var(--space-3); padding: var(--space-3);
  background: var(--lav-2); border-radius: var(--r-md); font-size: 13px;
  color: var(--ink-soft); overflow-wrap: anywhere; font-family: ui-monospace, monospace;
}

/* ─── Модалки ─── */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(42,24,50,.55);       /* скрим 55% — фон не конкурирует */
  display: grid; place-items: center; padding: var(--space-4);
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-card {
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--space-5); width: 100%; max-width: 460px; margin: auto;
}
.modal-card h3 { font-size: 20px; margin-bottom: 4px; }
.modal-sub { color: var(--muted); font-size: 14px; margin-bottom: var(--space-4); }
.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-5); }
.modal-sep { border: none; border-top: 1px solid var(--line-soft); margin: var(--space-5) 0 var(--space-4); }
.block-details summary { cursor: pointer; color: var(--primary); font-size: 14px; font-weight: 500; padding: var(--space-2) 0; }
.block-details form { margin-top: var(--space-3); }

/* ─── Широкая модалка записи: 2 колонки, компактно, БЕЗ внутреннего скролла ─── */
.modal-book { max-width: 640px; padding: var(--space-4) var(--space-5); }
.modal-book h3 { margin-bottom: 2px; }
.modal-book .modal-sub { margin-bottom: var(--space-3); }
/* .form-grid / .field-full / медиазапрос — общие, в styles.css */
/* Плотнее, чтобы всё помещалось на один экран без прокрутки */
.modal-book .field { margin-bottom: var(--space-3); }
.modal-book .field-hint { margin-top: 3px; }
.modal-book textarea { min-height: 52px; }
.modal-book .check-row { margin: 2px 0 0; }
/* Алерт стоит прямо над кнопками — ошибка видна без прокрутки */
.modal-foot { margin-top: var(--space-3); }
.modal-foot .alert { margin-bottom: var(--space-3); }
.modal-foot .modal-actions { margin-top: 0; }
.field-opt { color: var(--muted); font-weight: 400; font-size: 13px; }
.check-hint { color: var(--muted); font-weight: 400; font-size: 13px; }
.modal-book .modal-sep { margin: var(--space-3) 0 var(--space-2); }

.modal-card select {
  width: 100%; min-height: 48px; padding: 0 var(--space-3); font: inherit; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink);
}

.btn-danger { background: var(--alert); color: #fff; }
.btn-danger:hover { background: #A63A6A; }

.info-list { margin: 0; }
.info-list dt { color: var(--muted); font-size: 13px; margin-top: var(--space-3); }
.info-list dd { margin: 2px 0 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.info-list a { color: var(--primary); }

/* ─── Раздел менеджеров ─── */
.mgr-table td { padding: var(--space-3) var(--space-4); vertical-align: middle; text-align: left; }
.mgr-name { font-weight: 600; font-size: 15px; }
.mgr-sub { color: var(--muted); font-size: 12px; }
.mgr-langs { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.mgr-empty { color: var(--muted-2, #A294A8); font-style: italic; }
.row-inactive td { opacity: .55; }
.pill-badge { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; }
.pill-on { background: var(--good-bg); color: var(--good); }
.pill-off { background: #F2F2F4; color: var(--muted); }
.mgr-actions { white-space: nowrap; }
.btn-xs { min-height: 34px; padding: 0 var(--space-3); font-size: 13px; }
.btn-del { color: var(--alert); }

.field-row { display: flex; gap: var(--space-3); }
.field-row .field { flex: 1; min-width: 0; }
.dow-checks { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dow-check {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  font-size: 14px; min-height: 40px;
}
.dow-check:has(input:checked) { border-color: var(--primary); background: var(--lav-2); color: var(--primary); }
.modal-card input[type="time"] {
  width: 100%; min-height: 48px; padding: 0 var(--space-3); font: inherit; font-size: 16px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: #fff; color: var(--ink);
}

/* Загрузка фото */
.photo-upload { display: flex; align-items: center; gap: var(--space-4); }
.photo-preview {
  flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--r-pill);
  background: var(--lav) center/cover no-repeat; border: 1.5px solid var(--line);
  display: grid; place-items: center; position: relative;
}
.photo-preview:not(.has-photo)::after {
  content: ''; width: 26px; height: 26px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23A294A8' stroke-width='2'%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
}
.photo-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.photo-status { color: var(--muted); font-size: 13px; }

/* ─── Чекбокс-строка (напр. «Створити Meet») ─── */
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: var(--ink); margin: 4px 0 6px; }
.check-row input { width: 18px; height: 18px; flex: none; accent-color: var(--primary); cursor: pointer; }

/* ─── Вкладки видов и пресеты ─── */
.view-tabs { display: inline-flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-pill, 999px); padding: 4px; margin-bottom: var(--space-4); }
.vtab { padding: 7px 18px; border-radius: 999px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.vtab:hover { color: var(--primary); }
.vtab-on { background: var(--primary); color: #fff; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4); }
.preset { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; }
.preset:hover { border-color: var(--primary); color: var(--primary); }
.preset-on { background: var(--lav); border-color: var(--primary); color: var(--primary); font-weight: 600; }

/* ─── Список за период ─── */
.period-list td { padding: 10px 14px; vertical-align: top; }
.period-list .nowrap { white-space: nowrap; }
.period-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-4); }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--muted); }
.chip b { color: var(--ink); }
.chip-total { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-total b { color: #fff; }

/* ─── Сетка загрузки ─── */
.occ-grid { min-width: 720px; }
.occ-grid .daycol { text-align: center; padding: 8px 4px; }
.dc-dow { display: block; font-size: 11px; color: var(--muted); text-transform: capitalize; }
.dc-num { display: block; font-size: 14px; font-weight: 600; }
.occ { text-align: center; padding: 0; }
.occ a { display: block; padding: 12px 6px; text-decoration: none; font-variant-numeric: tabular-nums; }
.occ-zero a { color: var(--line); }
.occ-has a { color: var(--primary); font-weight: 700; background: var(--lav); }
.occ-has a:hover { background: var(--primary); color: #fff; }
.occ-total { text-align: center; color: var(--ink); }

/* ─── Опитування ─── */
.survey-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 16px; }
.survey-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.survey-links { margin-top: 12px; }
.lang-copy-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lang-copy { font: inherit; font-size: 13px; padding: 5px 12px; border: 1px solid var(--line); background: #fff; border-radius: 999px; cursor: pointer; }
.lang-copy:hover { border-color: var(--primary); color: var(--primary); }
.resp { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 8px; background: #fff; }
.resp summary { cursor: pointer; }
.resp-body { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ans-row { display: flex; gap: 12px; justify-content: space-between; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.ans-q { color: var(--muted); font-size: 14px; }
.ans-v { font-weight: 600; font-size: 14px; text-align: right; }

/* ─── Мобильные ─── */
@media (max-width: 720px) {
  .day-picker { margin-left: 0; width: 100%; }
  .admin-bar { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .admin-actions { justify-content: space-between; }
  .grid { min-width: 640px; }
  .field-row { flex-direction: column; gap: 0; }
  .mgr-table { min-width: 700px; }
}