/* Radio CRM 7 — оформление. Сетка: боковое меню ≥1100px, выдвижное меню на планшете/телефоне */
:root{
  --bg:#f3f5f8;--card:#fff;--ink:#16202c;--ink2:#3e4c5b;--mut:#7a8796;--line:#e3e8ee;--line2:#cfd7e1;
  --pri:#2563eb;--pri-d:#1d4fd7;--pri-l:#eaf1ff;--on:#3b82f6;
  --ok:#15935a;--ok-l:#e7f7ef;--warn:#b7791f;--warn-l:#fff6e5;--bad:#d93a3a;--bad-l:#fdeeee;
  --side:#16233a;--side2:#22324d;--side-ink:#b9c5d6;
  --kz:#0f7a63;--ru:#8a5a1d;
  --r:10px;--r-s:7px;--sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:14px/1.5 -apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:var(--pri);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:22px;font-weight:700;letter-spacing:-.2px;margin:2px 0 16px}
h3{margin:0 0 10px;font-size:15px;font-weight:650}h3 small,small{color:var(--mut);font-weight:400}

/* ===== каркас ===== */
body.app{display:flex;min-height:100vh}
.side{position:sticky;top:0;height:100vh;width:228px;flex:0 0 228px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;overflow-y:auto;z-index:30}
.brand{display:flex;align-items:center;gap:10px;padding:18px 16px 14px;color:#fff!important;font-weight:700;font-size:15px;text-decoration:none!important}
.brand small{display:block;font-weight:400;font-size:11px;color:var(--side-ink);opacity:.8}
.logo{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#3b82f6,#06b6d4);color:#fff;font-size:13px;letter-spacing:.5px}
.side nav{flex:1;padding:4px 10px 10px}
.side .ng{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:#6f819b;margin:14px 8px 4px}
.side nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--side-ink);font-size:13.5px;text-decoration:none}
.side nav a i{font-style:normal;width:18px;text-align:center;opacity:.75}
.side nav a:hover{background:var(--side2);color:#fff}
.side nav a.on{background:var(--pri);color:#fff}.side nav a.on i{opacity:1}
.side .me{border-top:1px solid rgba(255,255,255,.08);padding:12px 16px;font-size:12px;display:grid;gap:1px}
.side .me b{color:#fff;font-size:13px}.side .me a{color:#8fb4ff;margin-top:4px}
.wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.mbar{display:none}
main{padding:22px 26px 40px;width:100%;max-width:1600px;margin:0 auto}
main.login{max-width:400px;padding-top:12vh}
main.login h1{text-align:center}
main.login h1::before{content:"КН";display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;border-radius:12px;background:linear-gradient(135deg,#3b82f6,#06b6d4);color:#fff;font-size:17px}
main.login .narrow{max-width:none;margin:0;padding:22px}
main.login .btn{width:100%;padding:10px}
.shade{display:none}

@media (max-width:1099px){
  body.app{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 40px rgba(0,0,0,.25)}
  body.menu .side{transform:none}
  body.menu .shade{display:block;position:fixed;inset:0;background:rgba(10,20,35,.45);z-index:25}
  .mbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:20;background:var(--side);color:#fff;padding:0 12px;height:52px}
  .mbar b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .burger{background:none;border:0;color:#fff;font-size:22px;width:40px;height:40px;border-radius:8px;cursor:pointer}
  .burger:hover{background:var(--side2)}
  main{padding:16px 16px 40px}
  .wrap main>h1{display:none}
}
@media (max-width:600px){main{padding:12px 10px 32px}}

/* ===== карточки, формы, кнопки ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:16px;box-shadow:var(--sh)}
@media (max-width:600px){.card{padding:12px;border-radius:8px}}
.narrow{max-width:460px;margin:30px auto}
.form label{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:12.5px;font-weight:500;color:var(--ink2)}
.form label.chk,.chk{flex-direction:row;align-items:center;gap:7px;font-weight:400}
input,select,textarea{font:inherit;color:var(--ink);padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r-s);background:#fff;min-width:0;max-width:100%;transition:border-color .12s,box-shadow .12s}
.form label>input:not([type=checkbox]):not([type=radio]),.form label>select,.form label>textarea{width:100%}
input[type=checkbox],input[type=radio]{width:16px;height:16px;accent-color:var(--pri);padding:0}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(37,99,235,.18)}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 16px}.grid4 .full{grid-column:1/-1}.grid4 .span2{grid-column:span 2}
@media (max-width:900px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}.grid4 .span2{grid-column:auto}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--pri);color:#fff;border:1px solid var(--pri);border-radius:var(--r-s);padding:8px 15px;font:inherit;font-weight:550;cursor:pointer;white-space:nowrap;transition:background .12s}
.btn:hover{background:var(--pri-d);text-decoration:none}
.btn.ghost{background:#fff;color:var(--pri);border-color:var(--line2)}.btn.ghost:hover{background:var(--pri-l)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;color:var(--pri);cursor:pointer;font:inherit;padding:0}.danger{color:var(--bad)}
form.inline{display:inline}
.toolbar,.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
@media (max-width:600px){.toolbar>input,.toolbar>select,.filters>input,.filters>select{flex:1 1 140px}}
.alert{padding:11px 14px;border-radius:var(--r-s);margin-bottom:14px;background:var(--pri-l);border:1px solid #c7d8fb;color:#1e3a74}
.alert.ok{background:var(--ok-l);border-color:#b2e3c9;color:#0d5c39}.alert.err{background:var(--bad-l);border-color:#f3c0c0;color:#8a1f1f}.alert.warn{background:var(--warn-l);border-color:#f3d79c;color:#7a4e0c}
.muted{color:var(--mut)}.warn{color:var(--warn);font-weight:600}.okc{color:var(--ok)}.bad{color:var(--bad);font-weight:600}
.tag{display:inline-block;background:var(--pri-l);color:var(--pri);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600}
code{background:#eef2f7;padding:2px 6px;border-radius:5px;word-break:break-all;font-size:12.5px}.blur{filter:blur(4px);cursor:pointer}
.pre{white-space:pre;overflow:auto;max-height:520px;background:#f7f9fc;border:1px solid var(--line);padding:10px 12px;border-radius:var(--r-s);font:12px/1.45 Consolas,"SF Mono",monospace}

/* ===== таблицы ===== */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:16px;border-radius:var(--r);border:1px solid var(--line);background:#fff;box-shadow:var(--sh)}
.tscroll>.tbl{margin:0;border:0;box-shadow:none;border-radius:0}
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;overflow:hidden}
.tbl th,.tbl td{padding:8px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl th{background:#f7f9fc;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--mut);white-space:nowrap}
.tbl tbody tr:hover td,.tbl tr:hover td{background:#fafcff}
.tbl tr.off td{opacity:.45}.tbl tr.we td{background:#fffaf2}.nowrap{white-space:nowrap}
@media (max-width:600px){.tbl th,.tbl td{padding:7px 8px;font-size:13px}}

/* ===== сводка ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:4px}
@media (max-width:600px){.cards{grid-template-columns:1fr 1fr;gap:10px}.cards .card{margin-bottom:0}}
.stat{position:relative;overflow:hidden}
.stat b{display:block;font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.5px}
.stat span{color:var(--mut);font-size:12px}
.stat.good b{color:var(--ok)}.stat.bad b{color:var(--bad)}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
.stat.good::after{background:var(--ok)}.stat.bad::after{background:var(--bad)}
@media (max-width:600px){.stat b{font-size:22px}}
.holes{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px}
@media (max-width:600px){.holes{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.hole{padding:4px 2px!important}.hole small{display:none}}
.hole{display:flex;flex-direction:column;align-items:center;padding:7px 4px;border-radius:8px;border:1px solid var(--line);color:var(--ink)!important;text-decoration:none!important;transition:transform .1s}
.hole:hover{transform:translateY(-1px)}
.hole b{font-size:15px}.hole span{font-size:12px}.hole small{font-size:10px;color:var(--mut)}
.hole.good{background:var(--ok-l);border-color:#b2e3c9}.hole.warn{background:var(--warn-l);border-color:#f3d79c}.hole.bad{background:var(--bad-l);border-color:#f3c0c0}
.breaks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.brk{border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:12px;background:#fff}
.brk h4{margin:0 0 6px}.brk .aired{color:var(--ok)}.brk .off{opacity:.45;text-decoration:line-through}

/* ===== шахматка ===== */
.chess .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:8px}
.grid{border-collapse:separate;border-spacing:0;font-size:12px}
.grid th,.grid td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:27px;height:27px;text-align:center;padding:0;background:#fff}
.grid th{background:#f7f9fc;font-weight:600;color:var(--ink2)}
.grid th.we,.grid td.we{background:#fbf5ea}.grid th.sent{box-shadow:inset 0 -3px 0 var(--on)}
.grid .name{text-align:left;min-width:260px;max-width:340px;padding:2px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:sticky;left:0;z-index:2;box-shadow:1px 0 0 var(--line2)}
.grid th.name{background:#f7f9fc}
@media (max-width:600px){.grid .name{min-width:150px;max-width:150px;padding:2px 6px;font-size:11.5px}.grid th,.grid td{min-width:30px;height:32px}}
.grid td.cell[data-t]{cursor:pointer}.grid td.cell[data-t]:hover{background:#dbe8fe}
.grid td.cell.on{background:var(--on)!important;box-shadow:inset 0 0 0 1px #fff}
.grid td.sum{font-weight:600;padding:0 6px}.grid tr.tot td{color:var(--mut);font-size:11px}
.grid th a{color:inherit}
.addrow{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}.addrow input{width:280px;flex:0 1 280px}
@media (max-width:600px){.addrow input{flex:1 1 100%}.addrow .btn{flex:1}}
.plan-box summary{cursor:pointer;padding:2px 0;list-style-position:inside}.plan-box[open] summary{margin-bottom:14px}.plan-box .form label{margin-bottom:8px}

/* ===== планирование (календарь выбора дней) ===== */
.cols{display:grid;grid-template-columns:330px minmax(0,1fr);gap:26px}@media (max-width:900px){.cols{grid-template-columns:1fr}}
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(36px,46px));gap:5px}.calgrid b{text-align:center;font-size:11px;color:var(--mut)}.calgrid b.we{color:var(--bad)}
.day{cursor:pointer}.day input{display:none}.day span{display:block;text-align:center;line-height:40px;border-radius:8px;background:#eef2f7;font-weight:600;transition:background .1s}
.day span:hover{background:#dbe8fe}.day.we span{color:var(--bad)}.day input:checked+span{background:var(--on);color:#fff}
.calbtns{margin-bottom:10px;display:flex;gap:12px;flex-wrap:wrap}

/* ===== проекты и баланс ===== */
.proj input{width:100%;min-width:220px}.proj input.num{width:62px;min-width:0}.proj td.hours{min-width:360px}
.proj td.hours .hgrid{display:grid;grid-template-columns:repeat(9,38px);gap:2px 4px}
.proj td.hours label{display:flex;align-items:center;gap:3px;font-size:12px;margin:0}.proj td.hours input{min-width:0;width:auto;padding:0;margin:0}
.proj tr.newrow td{background:#f7f9fc}
.bal tr.win td{background:#eef4fe;font-size:13px;font-weight:500}.bal details{font-size:12px;margin-top:3px}
.bal .kz{color:var(--kz)}.bal .ru{color:var(--ru)}

/* ===== программирование дня ===== */
.lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:14px}
.lane{border:1px solid var(--line);border-radius:var(--r);background:#f8fafc}
.lane-h{padding:9px 12px;border-bottom:1px solid var(--line)}.lane-sum{font-size:12px;color:var(--mut)}.lane-sum .s{font-weight:700;color:var(--ink)}
ol.drop{list-style:none;margin:0;padding:7px;min-height:64px}
ol.drop li{background:#fff;border:1px solid var(--line);border-radius:7px;padding:8px 10px;margin-bottom:6px;font-size:13px;box-shadow:0 1px 1px rgba(16,24,40,.04)}
ol.drop li[draggable]{cursor:grab}ol.drop li[draggable]:hover{border-color:#b9cdf5}ol.drop li.dragging{opacity:.4;border-style:dashed}
.grip{color:#a9b4c1;margin-right:5px}

/* ===== эфирная справка (A4) ===== */
.doc{background:#fff;border:1px solid var(--line);box-shadow:0 4px 18px rgba(16,24,40,.08);max-width:800px;margin:0 auto 24px;padding:44px 52px;font:14px/1.5 "Times New Roman",Times,serif;color:#000}
@media (max-width:700px){.doc{padding:20px 14px;font-size:13px}.doc-t{font-size:11.5px}.sign{grid-template-columns:1fr!important;gap:4px}.sign .line{width:180px}}
.doc h2{text-align:center;font-size:18px;letter-spacing:1px;margin:0 0 18px}.doc .lead{text-align:justify}
.doc-t{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}.doc-t th,.doc-t td{border:1px solid #000;padding:4px 6px;vertical-align:top;text-align:center}
.doc .tscroll{border:0;box-shadow:none;border-radius:0}
.doc-t th small{font-weight:400;color:#555}.doc-t .times{font-size:10.5px;color:#333;line-height:1.3;text-align:left}.doc-t tr.tot td{font-weight:600}
.sign{display:grid;grid-template-columns:auto 180px auto;gap:12px;align-items:end;margin-top:28px}.sign .line{border-bottom:1px solid #000;height:18px}
.mp{margin-top:22px;margin-left:40px}

/* ===== печать ===== */
@media print{
  body,body.app{display:block;background:#fff}
  .side,.mbar,.shade,.toolbar,.filters,form,.no-print,.alert,main>h1{display:none!important}
  main{padding:0;max-width:none}.card,.tscroll{border:0;box-shadow:none}
  .doc{border:0;box-shadow:none;padding:0;max-width:none;margin:0}
  @page{size:A4;margin:18mm 15mm}
}
@media (max-width:700px){table.bal{min-width:640px}}
/* обновление из Jazler (в меню) */
.sync{margin:6px 12px 10px;padding:10px 12px;border-radius:9px;background:var(--side2);font-size:12px;display:grid;gap:7px}
.sync-t b{color:#fff;font-weight:600}
.sync-b{width:100%;padding:7px 10px;font-size:12.5px}
.sync-b[disabled]{opacity:.7}
.sync-m{color:#8fa1b8;line-height:1.35}.sync-m a{color:#8fb4ff}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#e5a13a;margin-right:6px;vertical-align:1px}.dot.ok{background:#34c27a}
.spin{display:inline-block;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
/* новый ролик и прослушивание */
.ns-head{display:flex;justify-content:space-between;align-items:center}.ns-src{display:flex;gap:18px;margin-bottom:8px;flex-wrap:wrap}
.ns-up,.ns-rn{margin-bottom:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ns-rn input{flex:1 1 360px}
.ns-wave canvas{width:100%;height:110px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;cursor:ew-resize;touch-action:none}
.ns-ctl{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-top:8px}.ns-ctl label{margin:0;width:110px}
.listen{background:none;border:1px solid var(--line2);border-radius:999px;width:28px;height:28px;cursor:pointer;color:var(--pri);font-size:12px;line-height:1}
.listen:hover{background:var(--pri-l)}.listen.wait{color:var(--mut);animation:spin 1s linear infinite;border-style:dashed}
.player-old{position:fixed;right:16px;bottom:16px;z-index:40;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgba(16,24,40,.18);padding:10px 12px;display:flex;gap:10px;align-items:center;max-width:min(520px,calc(100vw - 32px))}
.player b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.player audio{height:34px;max-width:260px}.player .x{background:none;border:0;font-size:18px;cursor:pointer;color:var(--mut)}
@media print{.player{display:none}}

/* светофор связи с Jazler */
.sync{border:1px solid transparent}
.lamp{display:flex;align-items:center;gap:10px}.lamp b{color:#fff;font-size:13.5px;line-height:1.25}
.bulbs{display:inline-flex;flex-direction:column;gap:3px;background:#0d1628;padding:4px;border-radius:7px;flex:0 0 auto}
.bulbs i{width:10px;height:10px;border-radius:50%;background:#2b3850;display:block}
.light-red .bulbs .r{background:#ff4d4d;box-shadow:0 0 8px #ff4d4d}
.light-yellow .bulbs .y{background:#ffc53d;box-shadow:0 0 8px #ffc53d;animation:blink 1.4s ease-in-out infinite}
.light-green .bulbs .g{background:#35d07f;box-shadow:0 0 8px #35d07f}
@keyframes blink{50%{opacity:.45}}
.sync.light-red{border-color:rgba(255,77,77,.45);background:rgba(255,77,77,.12)}
.sync.light-yellow{border-color:rgba(255,197,61,.4);background:rgba(255,197,61,.1)}
.sync.light-green{border-color:rgba(53,208,127,.3)}
.sync-m{color:#c3cfdf}.sync-help{font-size:11px;color:#8fa1b8!important}
/* светофор на сводке */
.light-card{display:flex;gap:18px;align-items:flex-start}
.light-card .bulbs{padding:6px;gap:6px;border-radius:10px}.light-card .bulbs i{width:22px;height:22px}
.light-card.light-red{border-left:4px solid var(--bad)}.light-card.light-yellow{border-left:4px solid #e5a100}.light-card.light-green{border-left:4px solid var(--ok)}
.light-card h3{font-size:18px;margin:2px 0 4px}.light-card p{margin:0 0 6px}
.legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}
.legend div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2)}.legend .bulbs{padding:3px}.legend .bulbs i{width:9px;height:9px}
.agent-log{margin:8px 0 0;padding:0;list-style:none;font-size:13px}.agent-log li{padding:4px 0;border-bottom:1px solid var(--line)}.agent-log li:last-child{border:0}

#toasts{position:fixed;right:16px;top:16px;z-index:60;display:grid;gap:8px;max-width:min(420px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(16,24,40,.16);font-size:13.5px;animation:tin .2s ease}
.toast.err{border-left-color:var(--bad)}.toast b{color:var(--ok)}.toast.err b{color:var(--bad)}.toast span{flex:1}
.toast button{background:none;border:0;font-size:16px;color:var(--mut);cursor:pointer;line-height:1}
@keyframes tin{from{transform:translateY(-6px);opacity:0}}
.legend .bulbs i.on-r{background:#ff4d4d}.legend .bulbs i.on-y{background:#ffc53d}.legend .bulbs i.on-g{background:#35d07f}

/* прослушивание в строке */
tr.loading,tr.playing{position:relative}
tr.loading td,tr.playing td{background:transparent!important}
tr.loading{background:repeating-linear-gradient(-45deg,#eaf1ff 0 14px,#dbe7ff 14px 28px);background-size:400% 100%;animation:preload 1.2s linear infinite}
@keyframes preload{to{background-position:-40px 0}}
tr.playing{background:linear-gradient(90deg,#d6e4ff var(--p,0%),#f4f8ff var(--p,0%));cursor:pointer}
tr.playing.paused{background:linear-gradient(90deg,#e4e9f2 var(--p,0%),#f7f9fc var(--p,0%))}
.listen-st{display:block;font-size:11px;color:var(--pri);margin-top:2px}.listen-st.bad{color:var(--bad)}
tr.playing .listen,tr.loading .listen{background:var(--pri);color:#fff;border-color:var(--pri)}
.bulbs i.on-r{background:#ff4d4d}.bulbs i.on-y{background:#ffc53d}.bulbs i.on-g{background:#35d07f}