/* «Контроль качества» (15.09.2026, владелец: «ОКК из таблиц — в Lina»). Отдельный файл — чтобы не толкаться в app.css с соседними правками.
   ⚠️ Наблюдатель (ОКК) на этой вкладке правит: кнопки носят класс .okk-edit, а не те id/классы, что прячет body.ro. */
.okk-bar{align-items:center}
.okk-seg button{padding:8px 14px}
.okk-net{cursor:pointer;user-select:none;margin-left:auto}
.okk-net input{width:13px;height:13px;min-height:0;margin:0;accent-color:var(--accent)}
.okk-flt{gap:8px}
.okk-flt select.w,.okk-flt input[type=date]{width:auto;min-height:36px}
.okk-flt input#okk_q{width:200px}
.okk-quick .chip{cursor:pointer}
.okk-dates{display:inline-flex;align-items:center;gap:6px}
.okk-kpi{gap:8px}
.okk-tile{min-width:130px;padding:10px 12px}
.okk-tile .v{font-size:22px;font-weight:800;line-height:1.1}
.okk-tile small{display:block;margin-top:2px}
.okk-mgrs{margin-bottom:10px}
.okk-mgrs summary{cursor:pointer;font-weight:700;list-style:none;display:inline-flex;gap:6px;align-items:center;padding:4px 0}
.okk-mgrs summary::before{content:"›";display:inline-block;transition:transform .15s;color:var(--faint)}
.okk-mgrs[open] summary::before{transform:rotate(90deg)}
.okk-mtbl tr[data-m]{cursor:pointer}.okk-mtbl tr[data-m]:hover td{background:var(--tint)}
.okk-top{margin:0 0 10px;color:var(--muted)}
.okk-tbl tr[data-id]{cursor:pointer}.okk-tbl tr[data-id]:hover td{background:var(--tint)}
.okk-tbl tr.has-err td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.okk-cm{max-width:360px;color:var(--muted);font-size:12.5px}
.okk-kind{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--soft);color:var(--muted)}
.okk-kind.k-call{background:var(--conf);color:var(--ink-info)}.okk-kind.k-chat{background:var(--wait);color:var(--ink-ok)}.okk-kind.k-lost{background:var(--no);color:var(--ink-bad)}.okk-kind.k-obzvon{background:var(--came);color:var(--ink-warn)}
.okk-score{display:inline-block;padding:2px 8px;border-radius:999px;font-weight:800;font-size:12.5px;background:var(--soft);color:var(--muted);white-space:nowrap}
.okk-score small{font-weight:600;font-size:11px}
.okk-score.good{background:var(--accent-soft);color:var(--ink-ok)}.okk-score.mid{background:var(--soft-warn);color:var(--ink-warn)}.okk-score.bad{background:var(--no);color:var(--ink-bad)}
.okk-cnt{font-weight:700;color:var(--muted)}
.tbl .okk-tbl,.tbl .okk-obt,.tbl .okk-ctbl,.tbl .okk-mtbl{min-width:0;width:100%}
.okk-fail{margin-bottom:10px}
.okk-intro{padding:8px 10px;background:var(--soft);border-radius:10px;margin-bottom:8px;line-height:1.4}

/* карточка проверки (панель справа; на телефоне — окно) */
.okk-body{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}.okk-body>*{flex:none}
.modal-card .okk-body{padding:0;overflow:visible}
.modal-card .ph{padding:0 0 10px;margin-bottom:10px}
.okk-foot{display:flex;gap:8px;align-items:center;padding:12px 18px;border-top:1px solid var(--line);background:var(--tint)}
.modal-card .okk-foot{padding:12px 0 0;background:transparent;margin-top:10px}
.okk-head{display:flex;flex-direction:column;gap:4px}
.okk-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.okk-links .btn.small{min-height:30px;padding:4px 10px}
.okk-links .call-aud{height:32px;max-width:100%}
.okk-sec{display:flex;flex-direction:column;gap:6px}
.okk-cr{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px;align-items:center;padding:3px 0;border-bottom:1px dashed var(--line)}
.okk-verdict{padding:10px 12px;background:var(--soft);border-radius:12px}
.okk-verdict .okk-rate{padding:0 0 4px}
.okk-hint{cursor:help}
.okk-cr:last-of-type{border-bottom:0}
.okk-cr-t{font-weight:600;line-height:1.3}.okk-cr-t .small{font-weight:400;margin-top:1px}
.okk-cr-v{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.okk-cr-v input[type=number]{width:64px;min-height:30px;padding:4px 6px;text-align:center}
.okk-chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--muted);font-weight:600;font-size:12.5px;white-space:nowrap}
.okk-chk input{width:16px;height:16px;min-height:0;margin:0;accent-color:var(--accent)}
.okk-rate{padding-top:6px;font-weight:600}.okk-rate b{font-size:16px}
.okk-col{align-items:flex-start}.okk-col label{padding-top:8px}
.okk-det summary{cursor:pointer;font-weight:700;padding:6px 0}
.okk-tr{white-space:pre-wrap;word-break:break-word;font-size:12.5px;line-height:1.45;padding:8px 10px;background:var(--soft);border-radius:10px;max-height:320px;overflow:auto}
.okk-msgs{display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--bg);border-radius:10px;max-height:380px;overflow:auto}
.okk-msgs .bub.auto{opacity:.7;border-style:dashed}
.okk-kv{display:flex;flex-direction:column;gap:4px;font-size:13px}.okk-kv>div>.muted{display:inline-block;min-width:96px}

/* обзвон, критерии, отчёт ОП */
.okk-obt tr.called td{color:var(--muted)}.okk-obt tr.called{cursor:pointer}.okk-obt a[data-open]{margin-left:4px}.okk-obt tr[data-i]:not(.called){cursor:pointer}.okk-obt tr[data-i]:not(.called):hover td{background:var(--tint)}
.okk-ctbl td{vertical-align:top}.okk-ctbl tr.off td{opacity:.55}.okk-ctbl tr.off td input,.okk-ctbl tr.off td textarea{opacity:1}
.okk-ctbl input,.okk-ctbl textarea{min-height:34px;padding:6px 8px}
.okk-ctbl textarea{resize:vertical;overflow:hidden;line-height:1.35;min-width:320px;width:100%}
.okk-ctbl td:nth-child(2){min-width:230px}.okk-ctbl td:nth-child(2) input{width:100%}.okk-ctbl td:nth-child(3){width:45%}
.okk-ctbl .okk-num{width:80px;text-align:right}
.okk-key{font-family:ui-monospace,Menlo,monospace;font-size:12px}
.okk-daily .row label{flex-basis:290px}
.okk-more{display:none}
@media (max-width:1000px){.okk-cm{max-width:220px}}
@media (max-width:700px){
  .okk-more{display:inline-block}
  .okk-flt:not(.open) .okk-dates,.okk-flt:not(.open) select.w,.okk-flt:not(.open) input#okk_q{display:none}
  .okk-flt input#okk_q,.okk-flt select.w{width:100%}.okk-dates{width:100%}.okk-dates input{flex:1}
  .okk-net{margin-left:0}
  .okk-kpi{gap:6px}.okk-kpi .card{min-width:calc(33.3% - 4px);flex:1;padding:8px 8px}.okk-tile .v{font-size:18px}.okk-tile small{font-size:10.5px}
  .okk-cr{grid-template-columns:1fr}.okk-cr-v{justify-content:flex-start}
  .okk-daily .row label{flex-basis:100%}
  .okk-tbl td[data-l="Комментарий"]{max-width:none}
}

/* плашка ОКК в беседе, апелляции, «Мои проверки» (16.09.2026) */
/* ОКК — плашкой в строке этапов, а не отдельной полосой над перепиской (21.09.2026, Лена: «больше видно сразу») */
.ch-okk{display:inline-block;margin:0;padding:3px 9px;border-radius:8px;font-size:12px;cursor:pointer;background:var(--accent-soft);color:var(--ink-ok);line-height:1.35;max-width:min(360px,40%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.ch-okk.bad{background:var(--no);color:var(--ink-bad)}.ch-okk:hover{filter:brightness(.97)}
.okk-aps .okk-ap{padding:8px 10px;border:1px dashed var(--line);border-radius:10px;margin-bottom:6px}
.okk-ap.open{border-color:var(--bad)}.okk-ap-t{margin:4px 0;white-space:pre-wrap}.okk-ap-a{font-size:12.5px;margin-top:4px}
.okk-ap-acts{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}.okk-ap-acts input{flex:1;min-width:160px}
.okk-ap-new textarea{width:100%}
.okk-seg .cnt{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;line-height:18px;margin-left:4px;font-style:normal}

/* «Почему теряем» (16.09.2026): ошибки, которые чаще всего кончаются отказом гостя */
.okk-cost-tbl tr[data-kind],.okk-cost-tbl tr[data-err]{cursor:pointer}
.okk-cost-tbl tr[data-kind]:hover td,.okk-cost-tbl tr[data-err]:hover td{background:var(--tint)}
.okk-cost-tbl tr.okk-dim td{color:var(--faint)}
.okk-cost-tbl tr.has-err td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.okk-cost-tbl td.r{white-space:nowrap}
.okk-diff{font-weight:800}
.okk-diff.bad{color:var(--bad)}
.okk-diff.good{color:var(--ink-ok)}
.okk-tile .v.bad{color:var(--bad)}
@media (max-width:700px){.okk-cost-tbl td:first-child{font-weight:700}}

/* «Позвонить» в «Обзвоне» и «Тайные гости» (16.09.2026, erp/okk_dial.py, erp/okk_mystery.py) */
.okk-ob-st{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}.okk-ob-st:empty{display:none}
.okk-ob-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.okk-dialed{line-height:1.3}
.okk-bignum{font-size:30px;font-weight:800;letter-spacing:.5px;margin:6px 0 10px;user-select:all;font-variant-numeric:tabular-nums}
.mg-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}.mg-kpi .mg-tile{min-width:0;display:flex;flex-direction:column;gap:2px}
.mg-tile .v small{display:inline;font-size:13px;font-weight:600}
.mg-tile.mg-late{border-color:var(--bad);box-shadow:inset 3px 0 0 var(--bad)}
.mg-tile small.bad,.okk-mgt small.bad{color:var(--bad)}.okk-mgt small.mid{color:var(--ink-warn);font-weight:700}
.mg-tile a[data-target]{margin-top:4px}
.okk-mgt tr[data-i]{cursor:pointer}.okk-mgt tr[data-i]:hover td{background:var(--tint)}.okk-mgt tr.off td{opacity:.6}
.tbl .okk-mgt{min-width:0;width:100%}
.okk-flt input[type=month]{width:auto;min-height:36px}
@media (max-width:700px){
  .mg-kpi{grid-template-columns:1fr 1fr}
  .okk-bignum{font-size:26px}
  .okk-ob-acts .btn{min-height:38px}
}

/* Базы для обзвона (22.09.2026, erp/ui/dial.js): список баз и лист, по которому звонят */
/* колонки списка баз: у «Гостей» сетка на пять колонок, здесь их четыре — иначе цифры разъезжаются по экрану */
@media (min-width:701px){ .dl-head, .item.dl-row{grid-template-columns:minmax(260px,2fr) 170px 130px 150px} }
.dl-del{margin-left:10px}
/* «Услуга» и «Абонемент» в фильтрах «Гостей» (22.09.2026) */
.gmore .gsel{max-width:320px;min-height:30px;padding:3px 8px;font-size:13px}
.gmore #gstaff{max-width:220px}
.gmore .gsep{width:1px;height:18px;background:var(--line);margin:0 4px}
@media (max-width:700px){ .gmore .gsel{max-width:100%;width:100%} }
.dl-bar{height:6px;border-radius:4px;background:var(--soft);margin-top:4px;overflow:hidden;max-width:160px}
.dl-bar i{display:block;height:100%;background:var(--ok);border-radius:4px}
.dl-row{cursor:pointer}
.dl-script{padding:8px 10px;margin-bottom:8px;line-height:1.45}
.dl-acts{display:flex;flex-wrap:wrap;gap:6px}
.dl-miss{margin-bottom:4px}
/* гость под строкой: визиты, заметки мастера, что на руках (22.09.2026, обзвон вдвоём) */
.dl-card > td{background:var(--tint);padding:10px 12px !important}
.dl-card-in{display:grid;grid-template-columns:1.4fr 1fr;gap:18px}
.dl-card-in.one{grid-template-columns:1fr}
.dl-card-full{grid-column:1/-1;margin-top:6px;font-size:13px}
.dl-card-t{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--faint);text-transform:uppercase;margin:0 0 4px}
.dl-card-col > .dl-card-t ~ .dl-card-t{margin-top:10px}
.dl-v{padding:4px 0;border-bottom:1px solid var(--line-w);font-size:13px;line-height:1.45}
.dl-v:last-child{border-bottom:0}
.dl-v-h{font-size:13px}
.dl-note-m{font-size:12.5px;line-height:1.45;margin-top:2px}
.dl-top{margin:-2px 0 4px}
.dl-hands{display:flex;flex-wrap:wrap;gap:4px}
.dl-note{margin-top:2px;cursor:pointer}
.dl-tbl tr.dl-other td{background:var(--soft)}
.dl-by{margin-top:10px}
@media (max-width:700px){ .dl-card-in{grid-template-columns:1fr;gap:10px} }
.dl-soon{margin:0 0 6px 2px}
.dl-tbl tr.called td{opacity:.75}
.dl-tbl td .gtag{vertical-align:middle}
/* ⚠️ метку «ведёт коллега» НЕ красим классом .warn: в app.css это плашка-предупреждение с display:flex,
   и в ячейке таблицы она растягивалась во всю ширину (поймано на съёмке урока 22.09.2026) */
.gtag.mate{background:var(--came);color:var(--came-e)}
@media (max-width:700px){
  .dl-acts .btn{min-height:38px}
  .dl-bar{max-width:none}
  .dl-tbl td:has(> .faint:only-child){display:none}   /* «Визиты —» и «не был» на телефоне только мешают */
}

/* сверка человеком (30.09.2026, владелец: «ИИ проверяет, сотрудник галочкой подтверждает»; «сочно, как у Apple»):
   кнопки сверки над списком, круглая галочка в строке, плитка с полоской, карточка с «Верно» */
.okk-chkbar{margin:2px 0 10px;overflow-x:auto;scrollbar-width:none}
.okk-chkbar::-webkit-scrollbar{display:none}
.okk-chkbar:empty{display:none}
.seg.okk-cseg{display:inline-flex;width:auto;padding:3px;gap:2px;background:var(--soft);border:0;border-radius:12px;overflow:visible}
.seg.okk-cseg button{flex:none;border:0;border-radius:9px;background:transparent;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);display:inline-flex;align-items:center;gap:7px;transition:background .15s,color .15s,box-shadow .15s}
.seg.okk-cseg button:hover{color:var(--text)}
.seg.okk-cseg button.on{background:var(--card);color:var(--text);box-shadow:0 1px 3px var(--sh),0 0 0 .5px var(--line)}
.okk-cseg .n{font-size:12px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.okk-cseg .n:empty{display:none}
.okk-cseg .n.hot{min-width:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;line-height:19px;text-align:center;font-weight:700}

.okk-ckc{white-space:nowrap}
.okk-ckw{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.okk-ck{position:relative;display:inline-flex;align-items:center;gap:8px;padding:4px 11px 4px 4px;margin:-4px 0 -4px -4px;border-radius:999px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--muted);-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
.okk-ck:hover{background:var(--soft);color:var(--text)}
.okk-ck input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.okk-dot{flex:none;box-sizing:border-box;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-s);background:var(--card);display:inline-grid;place-items:center;transition:background .2s,border-color .2s,box-shadow .2s}
.okk-dot svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset .28s cubic-bezier(.2,.8,.2,1) .06s}
.okk-ck:hover .okk-dot{border-color:var(--accent)}
.okk-ck input:checked+.okk-dot,.okk-dot.big{background:var(--accent);border-color:var(--accent)}
.okk-ck input:checked+.okk-dot svg,.okk-dot.big svg{stroke-dashoffset:0}
.okk-ck input:focus-visible+.okk-dot{box-shadow:0 0 0 3px var(--accent-soft)}
.okk-ck.on{color:var(--ink-ok)}
.okk-ck.pop .okk-dot{animation:okk-pop .36s cubic-bezier(.3,1.6,.5,1)}
.okk-ck.busy{pointer-events:none}
@keyframes okk-pop{0%{transform:scale(.84)}55%{transform:scale(1.15)}100%{transform:scale(1)}}
.okk-who{color:var(--faint);font-weight:500;font-size:12px}
.okk-ok-t{color:var(--ink-ok);font-weight:600}
.okk-fixed{background:var(--soft-warn);color:var(--ink-warn)}
.btn.okk-ed{margin-left:10px;min-height:28px;padding:3px 11px;border-color:transparent;background:transparent;color:var(--accent);font-weight:600}
.btn.okk-ed:hover{background:var(--accent-soft);color:var(--accent-h)}

.okk-tile-ck{cursor:pointer;transition:box-shadow .15s}
.okk-tile-ck:hover{box-shadow:0 2px 12px var(--sh)}
.okk-of{font-size:13px;font-weight:600;color:var(--faint);margin-left:5px}
.okk-prog{height:5px;border-radius:3px;background:var(--soft);overflow:hidden;margin:8px 0 5px}
.okk-prog i{display:block;height:100%;min-width:3px;border-radius:3px;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.2,1)}

.okk-done{display:flex;align-items:center;gap:14px;padding:18px 20px}
.okk-done b{font-size:15px;display:block;margin-bottom:2px}
.okk-dot.big{width:40px;height:40px;border:0}
.okk-dot.big svg{width:24px;height:24px;stroke-width:2.2;animation:okk-draw .55s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes okk-draw{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}

.okk-todo-t{background:var(--soft-info);color:var(--ink-info)}
.okk-ai{font-size:12.5px;padding:6px 10px;border-radius:8px;background:var(--soft-warn);color:var(--ink-warn);line-height:1.4}
.okk-ai .muted{color:inherit;opacity:.75}
.okk-left{color:var(--faint);font-size:12px;white-space:nowrap}
.okk-link{border:0;background:none;padding:0 2px;margin-left:4px;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.okk-foot .btn{white-space:nowrap}
.okk-foot [hidden]{display:none!important}
.okk-foot .btn.busy{opacity:.75}
.okk-kbd{display:none;margin-left:8px;padding:0 6px;border-radius:5px;background:rgba(255,255,255,.22);font-size:11px;line-height:17px;font-weight:700}
@media (hover:hover) and (pointer:fine){.okk-kbd{display:inline-block}}
.btn.okk-del-q{border-color:transparent;background:transparent}
.btn.okk-del-q:hover{background:var(--no)}
/* телефон: «Верно» всегда под пальцем, не в конце длинного списка критериев; подписи короче, чтобы влезли в одну строку */
.modal-card .okk-foot{flex-wrap:wrap}
/* bottom:-20px — до самого края экрана: у окна снизу отступ 20px, в нём просвечивал текст под кнопками (30.09.2026);
   снизу место под полоску «Домой» iPhone, когда Лина открыта как приложение */
.modal-card .okk-foot{position:sticky;bottom:-20px;z-index:2;background:var(--card);padding:10px 0 calc(10px + max(20px, env(safe-area-inset-bottom)));margin-top:10px;border-top:1px solid var(--line)}
@media (max-width:700px){
  .okk-long{display:none}
  .okk-ckc{white-space:normal}
  .okk-ck{margin:0 0 0 -4px;padding:6px 12px 6px 4px}
  .okk-dot{width:26px;height:26px}.okk-dot svg{width:16px;height:16px}
  .seg.okk-cseg button{padding:7px 9px;font-size:12.5px;gap:5px}
  .okk-cseg .n.all{display:none}
  .modal-card .okk-foot-todo #okk_agree{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.okk-dot,.okk-dot svg,.okk-prog i{transition:none}.okk-ck.pop .okk-dot,.okk-dot.big svg{animation:none}}