/* Страница «Рекламации» — рабочий список отдела, похожий на их Google-таблицу:
   плотная сетка, строки закрытых жёлтые и на паузе голубые (цвета листа),
   разделители месяцев серые, звонок сегодня бирюзовый, просроченный розовый.
   Общая тема отчётов (reportTheme.v1.js) подключается после этого файла и
   трогает table th / tbody tr:hover — свои правила здесь с классом .cr-sheet,
   чтобы они оказались сильнее. */

:root {
  --bg: #f6f7f9;
  --line: #dadce0;
  --line-strong: #bdc1c6;
  --text: #202124;
  --muted: #5f6368;
  --accent: #7c3aed;
  --accent-strong: #6d28d9;
  --accent-soft: #f3f0ff;
  --dark: #202124;
  /* цвета листа отдела (docs/claims-google-sheet.gs) */
  --row-closed: #fff59a;
  --row-closed-hover: #fff176;
  --row-paused: #cfe2f3;
  --row-paused-hover: #bcd6ee;
  --row-check: #d9ead3;
  --row-check-hover: #c7e0be;
  --cell-call-today: #5ce2ff;
  --cell-call-overdue: #ea9999;
  --cell-long: #f4cccc;
  --cell-ready-long: #ffcccb;
  --month-bar: #f0f0f0;
  --month-line: #b7b7b7;
  --danger: #c5221f;
  --ok: #188038;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { color: var(--text); font-size: 14px; line-height: 1.4; }

.page { max-width: 1600px; margin: 0 auto; padding: 10px 16px 48px; }

/* ── шапка ─────────────────────────────────────────────────────────────── */
.cr .report-nav { margin-bottom: 10px; }
.cr-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 12px; }
.cr-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; }
.cr-title-meta { color: var(--muted); font-size: 14px; }
.cr-title-actions { margin-left: auto; display: flex; gap: 8px; }

.cr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: #fff; color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cr-btn:hover { background: #f1f3f4; }
.cr-btn:disabled { opacity: .6; cursor: default; }
/* один язык «главного» на странице: фиолетовый, как ссылки и активная вкладка */
.cr-btn-dark { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.cr-btn-dark:hover { background: #5b21b6; }
.cr-btn-small { height: 32px; font-size: 13px; padding: 0 12px; }
.cr-link { background: none; border: 0; padding: 0; color: var(--accent-strong); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.cr-btn:focus-visible, .cr-tab:focus-visible, .cr-flag:focus-visible, .cr-link:focus-visible, .cr-exp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── новая рекламация ─────────────────────────────────────────────────── */
.cr-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -4px 0 12px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-soft); }
.cr-add-label { font-size: 14px; font-weight: 600; }
.cr-add-input { height: 38px; width: 220px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; font-size: 15px; color: var(--text); }
.cr-add-input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.cr-add-hint { flex-basis: 100%; font-size: 13px; color: var(--muted); }

/* ── вкладки-списки ────────────────────────────────────────────────────── */
.cr-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.cr-tab {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: #fff;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--text); cursor: pointer;
}
.cr-tab:hover { background: #f1f3f4; }
.cr-tab.is-active { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong); }
.cr-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: #eef0f3; color: var(--text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.cr-tab-count:empty { display: none; }
.cr-tab.is-active .cr-tab-count { background: rgba(255, 255, 255, .22); color: #fff; }
.cr-tab.is-zero:not(.is-active) .cr-tab-count { background: transparent; color: var(--muted); }

/* ── поиск, флажки, списки ─────────────────────────────────────────────── */
.cr-tools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 8px; }
.cr-search {
  flex: 1 1 340px; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--muted);
}
.cr-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.cr-search svg { width: 18px; height: 18px; flex: none; }
.cr-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.cr-search input::placeholder { color: var(--muted); }
.cr-flags { display: flex; gap: 8px; align-items: center; }
.cr-flag {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: #fff;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap;
}
.cr-flag:hover { background: #f1f3f4; }
.cr-flag.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.cr-flag.is-zero { opacity: .55; }
.cr-flag-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); }
.cr-flag-dot-call { background: var(--cell-call-overdue); }
.cr-flag-dot-stale { background: var(--cell-long); }
.cr-flag-count { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.cr-flag.is-active .cr-flag-count { color: var(--text); }
.cr-selects { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; }
.cr-sel { display: inline-flex; align-items: stretch; height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.cr-sel:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.cr-sel span { display: flex; align-items: center; padding: 0 10px; font-size: 13px; color: var(--muted); background: #f8f9fa; border-right: 1px solid var(--line); white-space: nowrap; }
.cr-sel select { min-width: 0; border: 0; outline: 0; padding: 0 8px; font: inherit; font-size: 14px; color: var(--text); background: #fff; max-width: 220px; cursor: pointer; }

/* ── таблица ───────────────────────────────────────────────────────────── */
.cr-sheet-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; font-size: 14px; color: var(--muted); }
.cr-shown b { color: var(--text); }
.cr-hint-short { flex: 1 1 320px; font-size: 13px; color: var(--muted); }
.cr-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; white-space: nowrap; }
.cr-toggle input { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* Таблица — «коробка» со своей прокруткой: шапка и колонка с номером заказа
   заморожены, как в Google-таблице. Высоту до низа окна подбирает клиент (fitSheet). */
.cr-sheet-wrap { background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; overflow: auto; max-height: 70vh; }
.cr-sheet th:first-child, .cr-sheet td:first-child { position: sticky; left: 0; z-index: 2; box-shadow: inset -1px 0 0 var(--line-strong); }
.cr-sheet th:first-child { z-index: 4; }
.cr-sheet tr.cr-month td:first-child { position: static; box-shadow: none; }
/* подпись месяца не уезжает при прокрутке вбок */
.cr-month-in { position: sticky; left: 10px; display: inline-flex; align-items: baseline; gap: 12px; }
/* Короткий вид: фиксированная раскладка с заданными ширинами узких колонок,
   остаток делят «Причина» и «Что сделать». Таблица не уже 1280px: в узком окне
   коробка листается вбок (заказ заморожен), а текст не рассыпается в столбик.
   Полный вид (все колонки A..X) — автораскладка с ограниченными ширинами. */
.cr-sheet { width: 100%; min-width: 1320px; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.cr-sheet-wrap.is-full .cr-sheet { table-layout: auto; width: max-content; min-width: 100%; }
.cr-sheet-wrap.is-full th { white-space: normal; }
.cr-sheet th {
  position: sticky; top: 0; z-index: 3;
  padding: 9px 8px; text-align: left; white-space: nowrap; cursor: pointer;
  background: #f1f3f4; color: var(--text); font-size: 12.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0; box-shadow: none;
  border-bottom: 1px solid var(--line-strong); border-right: 1px solid var(--line);
}
.cr-sheet th:last-child { border-right: 0; }
.cr-sheet th:hover { background: #e8eaed; }
.cr-sheet th.is-sorted { background: #e8eaed; }
.cr-sheet th.c-money { text-align: right; }
.cr-arrow { color: var(--accent-strong); font-size: 10px; }
/* слово длиннее колонки («ДОБОР1ШТ.РАМКА…», ссылка) переносится внутри ячейки, а не наезжает на соседнюю */
.cr-sheet td { padding: 6px 8px; vertical-align: top; line-height: 1.3; overflow-wrap: break-word; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cr-sheet td:last-child { border-right: 0; }
.cr-sheet tr:last-child td { border-bottom: 0; }

.cr-sheet tr.cr-row td { background: #fff; }
.cr-sheet tr.cr-row:hover td { background: #f5f7fa; }
.cr-sheet tr.cr-row.is-closed td { background: var(--row-closed); }
.cr-sheet tr.cr-row.is-closed:hover td { background: var(--row-closed-hover); }
.cr-sheet tr.cr-row.is-paused td { background: var(--row-paused); }
.cr-sheet tr.cr-row.is-paused:hover td { background: var(--row-paused-hover); }
.cr-sheet tr.cr-row.is-check td { background: var(--row-check); }
.cr-sheet tr.cr-row.is-check:hover td { background: var(--row-check-hover); }
.cr-check-acts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.cr-check-acts button { height: 26px; padding: 0 8px; border: 1px solid #93c47d; border-radius: 6px; background: #fff; font: inherit; font-size: 12px; font-weight: 600; color: #274e13; cursor: pointer; white-space: nowrap; }
.cr-check-acts .cr-check-ok { background: #38761d; border-color: #38761d; color: #fff; }
.cr-check-acts button:hover { filter: brightness(1.05); }
.cr-check-acts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cr-return-box textarea { width: 100%; box-sizing: border-box; height: 70px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 14px; resize: none; }
.cr-return-box textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.cr-sheet tr.cr-row.is-incoming td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--line-strong); }
.cr-sheet tr.cr-row.is-expanded td:first-child { box-shadow: inset 3px 0 0 var(--dark), inset -1px 0 0 var(--line-strong); }
/* подсветка ячеек — как в таблице, сильнее цвета строки и наведения */
.cr-sheet tr.cr-row td.is-call-today, .cr-sheet tr.cr-row:hover td.is-call-today { background: var(--cell-call-today); font-weight: 700; }
.cr-sheet tr.cr-row td.is-call-overdue, .cr-sheet tr.cr-row:hover td.is-call-overdue { background: var(--cell-call-overdue); font-weight: 700; }
.cr-sheet tr.cr-row td.is-long, .cr-sheet tr.cr-row:hover td.is-long { background: var(--cell-long); }
.cr-sheet tr.cr-row td.c-ready.is-long, .cr-sheet tr.cr-row:hover td.c-ready.is-long { background: var(--cell-ready-long); }

.cr-sheet tr.cr-month td {
  padding: 8px 10px; background: var(--month-bar); color: var(--text);
  border-top: 1px solid var(--month-line); border-bottom: 1px solid var(--month-line);
  font-size: 14px; font-weight: 800; letter-spacing: .02em;
}
.cr-sheet tr.cr-month small { font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.cr-sheet tr.cr-empty td { padding: 0; color: var(--muted); font-size: 15px; }
.cr-empty-in { position: sticky; left: 0; box-sizing: border-box; width: var(--sheet-w, auto); max-width: 100%; padding: 28px 16px; text-align: center; }

/* колонка «Заказ»: стрелка «подробнее» перед номером, ярлыки под ним */
.c-order { width: 112px; word-break: break-word; }
.cr-exp { display: inline-block; vertical-align: top; width: 20px; height: 20px; margin: 0 2px 0 -4px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 12px; line-height: 20px; text-align: center; cursor: pointer; }
.cr-exp:hover, .cr-sheet tr.cr-row:hover .cr-exp { background: #e8eaed; color: var(--text); }
.cr-sheet tr.cr-row.is-expanded .cr-exp { transform: rotate(90deg); color: var(--text); }
.cr-order { color: var(--accent-strong); font-weight: 700; font-size: 14px; text-decoration: none; }
a.cr-order:hover { text-decoration: underline; }
.cr-tag { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-strong); font-size: 11px; font-weight: 700; white-space: nowrap; }
.c-order .cr-tag { display: block; width: max-content; }
.cr-tag-lost { background: #fecaca; color: #7f1d1d; }
.c-status { width: 118px; }
.c-status b { display: block; font-weight: 700; white-space: nowrap; }
/* «Подтвердить у клиента» длиннее остальных статусов — переносится, а не наезжает на «Создана» */
.cr-row.is-check .c-status b { white-space: normal; }
.cr-status-sub { display: block; color: var(--muted); font-size: 12px; }
.cr-status-sub.is-stale { color: var(--danger); font-weight: 700; }
.c-date { white-space: nowrap; width: 86px; font-variant-numeric: tabular-nums; }
.c-name { width: 116px; }
.c-text, .c-wide { word-wrap: break-word; }
/* перенос строки, набранный в ячейке, виден и в таблице */
.cr-sheet td.c-text, .cr-sheet td.c-wide, .cr-dv { white-space: pre-line; }
.c-narrow { width: 110px; }
.c-money { text-align: right; white-space: nowrap; width: 96px; font-variant-numeric: tabular-nums; }
.cr-sheet-wrap.is-full .c-name { width: 170px; min-width: 170px; max-width: 170px; }
.cr-sheet-wrap.is-full .c-text { width: 240px; min-width: 240px; max-width: 240px; }
.cr-sheet-wrap.is-full .c-wide { width: 320px; min-width: 320px; max-width: 320px; }
.cr-sheet-wrap.is-full .c-narrow { width: 130px; min-width: 130px; max-width: 130px; }
.cr-sheet-wrap.is-full .c-date { width: 110px; }
.c-total { font-weight: 700; }

/* правка ячеек: щелчок открывает редактор прямо в ячейке, как в таблице */
.cr-sheet td.is-editable { cursor: cell; }
.cr-sheet tr.cr-row td.is-editable:hover { box-shadow: inset 0 0 0 2px rgba(124, 58, 237, .45); }
.cr-sheet tr.cr-row td.is-editing, .cr-sheet tr.cr-row:hover td.is-editing { position: relative; padding: 0; box-shadow: inset 0 0 0 2px var(--accent); background: #fff; }
.cr-edit { display: block; width: 100%; min-width: 80px; min-height: 36px; margin: 0; padding: 7px 8px; border: 0; outline: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--text); resize: none; }
textarea.cr-edit { min-height: 58px; height: 100%; }
select.cr-edit { cursor: pointer; }
/* календарь шире узкой колонки дат: редактор накрывает соседнюю ячейку, год виден целиком */
.c-date .cr-edit { position: absolute; left: 0; top: 0; z-index: 6; min-width: 136px; height: 100%; padding: 7px 6px; background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.c-money .cr-edit { text-align: right; }
.cr-sheet tr.cr-row td.is-saving { color: var(--muted); font-style: italic; }
.cr-sheet tr.cr-row td.is-saved { animation: cr-saved 1.4s ease-out; }
@keyframes cr-saved { 0% { box-shadow: inset 0 0 0 2px var(--ok); } 100% { box-shadow: inset 0 0 0 0 transparent; } }
/* кнопки «записать/отменить» для касаний: клавиш Enter и Esc на телефоне нет */
/* панель лежит под редактором поверх следующей строки: не зависит от ширины
   ячейки, видна и под календарём, и под многострочным полем */
.cr-sheet tr.cr-row td.is-editing .cr-edit-bar { position: absolute; left: 0; top: 100%; z-index: 7; display: flex; gap: 6px; width: max-content; padding: 6px; background: #fff; border-radius: 0 0 8px 8px; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); }
.cr-edit-bar button { height: 36px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; cursor: pointer; }
.cr-edit-bar .cr-edit-ok { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

/* сборщики галочками: список поверх строк ниже, пока идёт выбор */
.cr-sheet tr.cr-row td.is-editing .cr-multi { position: absolute; left: 0; top: 0; z-index: 8; min-width: 250px; padding: 4px 0 0; background: #fff; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .22), inset 0 0 0 2px var(--accent); font-style: normal; color: var(--text); }
.cr-multi-list { max-height: 320px; overflow: auto; }
.cr-multi label { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 14px; white-space: nowrap; cursor: pointer; }
.cr-multi label:hover { background: var(--accent-soft); }
.cr-multi label input { width: 16px; height: 16px; margin: 0; cursor: pointer; }
.cr-multi-custom small { color: var(--muted); }
.cr-multi-bar { display: flex; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--line); }
.cr-multi-bar button { height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
.cr-multi-bar .cr-multi-ok { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

/* окно звонка: история + заметка + дата следующего, поверх строк ниже */
.cr-sheet tr.cr-row td.is-editing .cr-call { position: absolute; left: -2px; top: -2px; z-index: 9; width: 420px; max-width: calc(100vw - 48px); background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22), inset 0 0 0 2px var(--accent); font-style: normal; font-weight: 400; color: var(--text); text-align: left; white-space: normal; }
.cr-sheet tr.cr-row td.is-editing .cr-call:focus { outline: 0; }
.cr-call-move-ok { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; font-weight: 600; }
.cr-call-move-ok:hover { border-color: var(--accent-strong); }
.cr-call-q { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 0; font-size: 13px; color: var(--accent-strong); font-weight: 600; }
.cr-call-skip { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; }
.cr-call-skip:hover { color: var(--accent-strong); text-decoration: underline; }
.cr-call-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 10px 2px 14px; }
.cr-call-head > span { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; }
.cr-call-head b { font-weight: 700; }
.cr-call-x { flex: none; width: 28px; height: 28px; margin-left: 2px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 15px; color: var(--muted); cursor: pointer; align-self: center; }
.cr-call-x:hover { background: #f1f3f4; color: var(--text); }
.cr-call-phone { display: flex; align-items: center; gap: 10px; padding: 2px 14px 0; }
.cr-call-tel { color: var(--accent-strong); font-size: 20px; font-weight: 700; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-call-tel:hover { text-decoration: underline; }
.cr-call-copy { height: 26px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 13px; background: #fff; font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; }
.cr-call-copy:hover { border-color: var(--accent); color: var(--accent-strong); }
.cr-call-nophone { padding: 2px 14px 0; font-size: 13px; color: var(--muted); }
.cr-call-ctx { padding: 4px 14px 0; font-size: 13px; color: var(--text); }
.cr-call-meta { padding: 2px 14px 0; font-size: 12px; color: var(--muted); }
.cr-call-hist { max-height: 120px; overflow: auto; margin: 8px 10px 0; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; }
.cr-call-hist > div { display: grid; grid-template-columns: 82px 1fr; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.cr-call-hist > div:last-child { border-bottom: 0; }
.cr-call-hist b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.cr-call-none { padding: 6px 10px; color: var(--muted); font-size: 13px; }
.cr-call-hist { max-height: 170px; }
.cr-call-rec { cursor: pointer; }
.cr-call-rec:hover, .cr-call-rec:focus-visible { background: var(--accent-soft); outline: 0; }
.cr-call-rec i { font-style: normal; color: var(--muted); }
.cr-call-rec.is-open { display: block; cursor: default; background: #fff; }
.cr-call-rec-edit { display: grid; grid-template-columns: 82px 1fr; gap: 6px 8px; align-items: center; }
.cr-call-rec-edit b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.cr-call-rec-input { height: 30px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 6px; font: inherit; font-size: 14px; color: var(--text); background: #fff; min-width: 0; }
.cr-call-rec-input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.cr-call-rec-edit small { grid-column: 2; font-size: 12px; color: var(--muted); }
.cr-call-rec-bar { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.cr-call-rec-bar button { height: 28px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; }
.cr-call-rec-bar .cr-call-rec-save { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; font-weight: 600; }
.cr-call-rec-bar .cr-call-rec-del.is-confirm { border-color: #c5221f; color: #c5221f; font-weight: 600; }
.cr-call-rec-bar button:disabled { opacity: .6; cursor: default; }
.cr-call-rec-edit .cr-call-err { grid-column: 1 / -1; }
.cr-call-more { display: block; width: 100%; padding: 6px 10px; border: 0; background: none; text-align: left; font: inherit; font-size: 13px; color: var(--accent-strong); cursor: pointer; }
.cr-call-more:hover { text-decoration: underline; }
.cr-call-act-wide { grid-column: 1 / -1; }
.cr-sheet .c-visit { width: 132px; min-width: 132px; cursor: pointer; }
.cr-visit { display: inline-block; padding: 2px 7px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-strong); font-size: 13px; font-weight: 600; white-space: nowrap; }
.cr-visit.is-today { background: #d7f5fb; color: #0b6176; }
.cr-visit.is-overdue { background: #fde8e8; color: #b42318; }
.cr-visit.is-done { background: #e6f4ea; color: #137333; }
.cr-visit-add { color: var(--muted); font-size: 13px; }
tr.cr-row:hover .cr-visit-add { color: var(--accent-strong); }
.cr-visit-now { margin: 8px 14px 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); font-size: 13px; line-height: 1.45; }
.cr-visit-now.is-done { background: #e6f4ea; }
.cr-visit-now.is-overdue { background: #fde8e8; }
.cr-visit-now small { color: var(--muted); }
.cr-visit-now a { color: var(--accent-strong); }
.cr-call-panel label small { font-size: 12px; color: var(--muted); }
.cr-call-crew { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.cr-call-crewman { display: flex; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; color: var(--text); cursor: pointer; margin: 0; }
.cr-call-crewman input { width: 16px; height: 16px; accent-color: var(--accent-strong); }
.cr-call-crewman em { font-style: normal; font-size: 11px; color: var(--accent-strong); font-weight: 600; }
.cr-call-hint { font-size: 12px; color: var(--muted); line-height: 1.4; }
.cr-call-hint .cr-link { font-size: 12px; }
.cr-call-hist > .cr-call-none { display: block; }
.cr-call-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 14px 12px; }
.cr-call-acts[hidden], .cr-call-panel[hidden] { display: none; }
.cr-call-act { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.cr-call-act span { font-size: 14px; font-weight: 600; }
.cr-call-act small { font-size: 12px; color: var(--muted); line-height: 1.3; }
.cr-call-act:hover { border-color: var(--accent); background: var(--accent-soft); }
.cr-call-act.is-main { border-color: var(--accent); }
.cr-call-act:focus-visible, .cr-chip:focus-visible, .cr-call-bar button:focus-visible, .cr-call-copy:focus-visible, .cr-call-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cr-call-panel { display: grid; gap: 5px; padding: 8px 14px 12px; }
.cr-call-panel label { font-size: 12px; color: var(--muted); margin-top: 2px; }
.cr-call-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-chip { height: 30px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 15px; background: #fff; font: inherit; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.cr-chip small { font-size: 12px; color: var(--muted); }
.cr-chip:hover { border-color: var(--accent); }
.cr-chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.cr-chip.is-on small { color: var(--accent-strong); }
.cr-chip.is-stop { color: var(--muted); }
.cr-call-pick { height: 30px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 15px; background: #fff; font: inherit; font-size: 13px; color: var(--text); }
.cr-call-panel textarea { width: 100%; box-sizing: border-box; height: 44px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 6px; font: inherit; font-size: 14px; background: #fff; color: var(--text); resize: none; }
.cr-call-panel textarea:focus, .cr-call-pick:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15); }
.cr-call-err { font-size: 13px; color: #c5221f; }
.cr-call-bar { display: flex; gap: 6px; align-items: center; margin-top: 4px; }
.cr-call-bar button { height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; }
.cr-call-bar .cr-call-ok { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.cr-call-keys { padding: 0 14px 10px; font-size: 12px; color: var(--muted); }
.cr-call-keys[hidden] { display: none; }

/* раскрытая строка */
.cr-sheet tr.cr-details td { padding: 0; background: #fafbfc; border-bottom: 2px solid var(--line-strong); cursor: default; }
/* подробности не уезжают при прокрутке таблицы вбок: ширина видимой части коробки (--sheet-w ставит клиент) */
.cr-details-in { position: sticky; left: 0; box-sizing: border-box; width: var(--sheet-w, auto); max-width: 100%; padding: 14px 16px 16px; }
.cr-dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 28px; }
.cr-d { font-size: 14px; }
.cr-dl { display: block; margin-bottom: 2px; font-size: 12px; color: var(--muted); }
.cr-dv b { font-weight: 700; }
.cr-pre { margin: 6px 0 0; padding: 6px 8px; max-height: 150px; overflow: auto; white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.cr-dlinks { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.cr-none { color: var(--muted); font-weight: 400; }

.cr-hint { margin: 10px 2px 0; font-size: 13px; color: var(--muted); }
.cr-error { margin: 10px 0; padding: 10px 14px; border: 1px solid #f1b0b0; border-radius: 8px; background: #fdecec; color: #8a1c1c; }

/* ── итоги для руководства ─────────────────────────────────────────────── */
.cr-totals { margin-top: 28px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.cr-totals > summary { padding: 14px 16px; font-size: 15px; font-weight: 700; cursor: pointer; list-style: none; }
.cr-totals > summary::-webkit-details-marker { display: none; }
.cr-totals > summary::before { content: '▸'; display: inline-block; width: 18px; color: var(--muted); transition: transform .12s; }
.cr-totals[open] > summary::before { transform: rotate(90deg); }
.cr-totals-body { padding: 0 16px 18px; }
.cr-totals-line { margin: 4px 0 12px; font-size: 14px; }
.cr-totals-block { overflow-x: auto; }
.cr-totals-block h3 { margin: 14px 0 8px; font-size: 14px; }
.cr-totals-months { max-width: 720px; }
.cr-totals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 0 24px; }
.cr-mini { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cr-mini th { position: static; padding: 7px 8px; text-align: left; background: #f1f3f4; color: var(--text); font-size: 12.5px; text-transform: none; letter-spacing: 0; box-shadow: none; border-bottom: 1px solid var(--line-strong); }
.cr-mini td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.cr-mini td:first-child { white-space: nowrap; }
.cr-mini .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cr-mini tbody tr:hover td { background: transparent; }

/* ── узкие экраны ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .page { padding: 8px 12px 40px; }
  /* навигация отчётов — одной прокручиваемой строкой, а не шестью */
  .cr .report-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cr .report-nav a, .cr .report-nav-link { white-space: nowrap; flex: none; }
  .cr-title { font-size: 22px; }
  .cr-title-actions { margin-left: auto; }
  .cr-title-actions .cr-btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .cr-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .cr-tab { flex: none; height: 38px; font-size: 13px; padding: 0 10px; }
  .cr-flags { width: 100%; }
  .cr-flag { flex: 1; justify-content: center; font-size: 13px; padding: 0 10px; }
  .cr-sel { flex: 1 1 100%; }
  .cr-sel select { flex: 1; max-width: none; }
  .cr-hint-short { flex-basis: 100%; }
  .cr-sheet { font-size: 13px; }
  .cr-sheet th { font-size: 13px; }
  .cr-status-sub, .cr-dl { font-size: 13px; }
  .cr-tag { font-size: 12px; }
  .cr-exp { width: 28px; height: 28px; font-size: 14px; line-height: 28px; margin: -4px 0 0 -6px; }
  a.cr-order { display: inline-block; padding: 4px 6px; margin: -4px -6px; }
  .cr-toggle { min-height: 36px; }
  /* редактор может накрыть соседнюю ячейку — иначе в 82px не виден год и текст */
  .cr-sheet tr.cr-row td.is-editing { z-index: 5; }
  textarea.cr-edit { min-width: 240px; min-height: 90px; }
  .cr-dgrid { grid-template-columns: 1fr; }
  /* окно звонка на телефоне: кнопки исхода крупнее, во всю ширину окна */
  .cr-call-act { padding: 11px 10px; }
  .cr-call-tel { font-size: 22px; }
  .cr-chip, .cr-call-pick { height: 36px; border-radius: 18px; }
}
/* iOS увеличивает страницу при фокусе в поле со шрифтом меньше 16px */
@media (max-width: 720px) and (hover: none) {
  .cr-edit, .cr-search input, .cr-sel select, .cr-call-panel textarea, .cr-call-pick { font-size: 16px; }
}