/* ============ TechLog · Duolingo-style dark ============ */
:root{
--bg:#0F171B;
--panel:#17232A;
--panel-2:#1C2B33;
--line:#31434C;
--line-soft:#26363E;
--text:#F1F7FB;
--dim:#8AA0AB;
--dim-2:#8296A0; /* v1.07.79: было #5D737E — 3.22 на панели, ниже нормы 4.5 */
--green:#58CC02; --green-hi:#79E23A; --green-dk:#3F9A02; --green-ink:#0E2A00;
--blue:#1CB0F6; --blue-dk:#0E86C0;
--red:#FF4B4B; --red-dk:#C93636;
--orange:#FF9600; --yellow:#FFC800; --purple:#CE82FF; --teal:#2EC4B6;
--black-chip:#0B0F12;
--r:16px; --r-sm:12px;
--shadow-press:0 4px 0;
font-size:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
background:var(--bg); color:var(--text);
font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
font-weight:600; line-height:1.35;
min-height:100dvh;
padding-bottom:calc(72px + env(safe-area-inset-bottom));
}
#app{max-width:560px;margin:0 auto;padding:12px 12px 8px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{
font:inherit;color:var(--text);
background:var(--panel-2);border:2px solid var(--line);
border-radius:var(--r-sm);padding:10px 12px;width:100%;
}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid rgba(28,176,246,.45);outline-offset:1px}
input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--green);flex:0 0 auto}
input[type=date]{color-scheme:dark}
label{display:flex;align-items:center;gap:10px}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:.2px}
.muted{color:var(--dim)}
.tiny{font-size:.78rem;color:var(--dim)}
.nowrap{white-space:nowrap}
.spacer{flex:1}
hr.sep{border:none;border-top:2px solid var(--line-soft);margin:12px 0}
/* ---------- Шапка ---------- */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.logo{
width:44px;height:44px;border-radius:12px;flex:0 0 auto;
background:var(--green);box-shadow:var(--shadow-press) var(--green-dk);
display:grid;place-items:center;color:var(--green-ink);font-weight:900;font-size:1.15rem;
transform:rotate(-4deg); /* v1.07.79: белый по зелёному давал 2.09 */
}
.logo span{transform:rotate(4deg)}
.brand{line-height:1.05;flex:1;min-width:0}
.brand .name{font-weight:900;font-size:1.25rem}
.brand .name b{color:var(--blue)}
.brand .sub{font-size:.7rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-wrap{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;width:clamp(52px,3.25em,68px)}
.avatar{
width:clamp(44px,2.75em,60px);height:clamp(44px,2.75em,60px);border-radius:50%;
border:3px solid var(--blue); /* v1.07.79: em — инициалы не вылезают при шрифте ×1.6 */
background:var(--panel-2);
display:grid;place-items:center;font-weight:900;color:var(--blue);
}
/* v1.07.08: палитра ролей — сотрудник синий, менеджер красный, админ фиолетовый */
.avatar.role-tech{border-color:var(--blue);color:var(--blue)}
.avatar.role-manager{border-color:var(--red);color:var(--red)}
.avatar.role-admin{border-color:var(--purple);color:var(--purple)}
.login-pill{
margin-top:-7px;background:var(--bg);border:2px solid var(--line);
border-radius:999px;padding:1px 7px;font-size:.6rem;color:var(--dim);
position:relative;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sync-btn, .icon-btn{
width:40px;height:40px;border-radius:12px;border:2px solid var(--line);
display:grid;place-items:center;color:var(--blue);font-size:1.1rem;background:var(--panel);
flex:0 0 auto;cursor:pointer
}
.icon-btn svg{width:20px;height:20px}
.sync-btn.spin svg, .icon-btn.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- Неделя ---------- */
.week{display:flex;align-items:stretch;gap:6px;margin:6px 0 12px}
.week .wk-arrow{
width:34px;border-radius:var(--r-sm);border:2px solid var(--line);
color:var(--dim);font-weight:900;background:var(--panel)
}
.week .days{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;flex:1}
.day-cell{
border:2px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
padding:6px 2px;text-align:center;line-height:1.1;color:var(--dim)
}
.day-cell .dow{font-size:.7rem;font-weight:800;letter-spacing:.5px}
.day-cell .dom{font-size:1.05rem;font-weight:900;color:var(--text)}
.day-cell .mon{font-size:.62rem}
.day-cell.sel{border-color:var(--blue);background:rgba(28,176,246,.12);color:var(--blue)}
.day-cell.sel .dom{color:var(--blue)}
.day-cell .dot-row{display:flex;justify-content:center;gap:3px;height:6px;margin-top:3px}
.day-cell .dot{width:6px;height:6px;border-radius:50%}
/* ---------- Кнопки ---------- */
.btn{
display:flex;align-items:center;justify-content:center;gap:8px;
border-radius:var(--r);padding:13px 16px;font-weight:900;letter-spacing:.4px;
border:2px solid transparent;width:100%;
transition:transform .05s, box-shadow .05s;
text-transform:uppercase;
}
.btn:active{transform:translateY(3px)}
.btn-green{background:var(--green);color:var(--green-ink);box-shadow:var(--shadow-press) var(--green-dk)}
.btn-green:active{box-shadow:0 1px 0 var(--green-dk)}
.btn-blue{background:var(--blue);color:#04314A;box-shadow:var(--shadow-press) var(--blue-dk)}
.btn-blue:active{box-shadow:0 1px 0 var(--blue-dk)}
.btn-red{background:#D23A3A;color:#fff;box-shadow:var(--shadow-press) #A32C2C} /* v1.07.79: контраст 4.77 */
.btn-red:active{box-shadow:0 1px 0 #A32C2C}
.btn-ghost{background:var(--panel);border-color:var(--line);color:var(--dim);box-shadow:var(--shadow-press) #0a1013}
.btn-ghost:active{box-shadow:0 1px 0 #0a1013}
.btn.sm{padding:9px 12px;border-radius:var(--r-sm);font-size:.85rem;width:auto}
.btn:disabled{opacity:.45;pointer-events:none}
/* ---------- Карточки ---------- */
.card{
background:var(--panel);border:2px solid var(--line);
border-radius:var(--r);padding:12px;margin-bottom:10px;
}
.card.gray{border-color:var(--line)}
.section-title{
display:flex;align-items:center;gap:8px;margin:16px 0 8px;
font-weight:900;font-size:1rem
}
.section-title::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--green)}
.section-title .hint{font-weight:600;font-size:.75rem;color:var(--dim)}
/* строка задания/пикапа */
.item{
display:flex;gap:10px;align-items:center;
background:var(--panel);border:2px solid var(--line);
border-radius:var(--r);padding:10px 12px;margin-bottom:8px;
border-left-width:6px;
}
.item .abbr{
min-width:52px;height:44px;border-radius:12px;border:2px solid var(--line);
display:grid;place-items:center;font-weight:900;letter-spacing:.5px;background:var(--panel-2)
}
.item .info{flex:1;min-width:0}
.item /* v1.08.01: при системном шрифте ×1.6 название с юнитом не влезало в строку
(+21px). Многоточие оставляем, но даём строке сжиматься по-настоящему. */
.info .t{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%}
.item .info .s{font-size:.75rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .right{text-align:right}
.eq-dots{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.eq-dot{
width:2.26em;height:2.26em;border-radius:50%; /* v1.07.79: em вместо px — растёт вместе со шрифтом */display:grid;place-items:center;
color:#fff;font-size:.72rem;font-weight:900;border:2px solid rgba(255,255,255,.18)
}
/* v1.07.83: чекбоксы в строках (цены контрагента и т.п.) были 22×22 — ниже
нормы зоны нажатия; сенсорные экраны их расширяет правило ниже, но и мышью
попадать должно быть удобно */
.rowline input[type="checkbox"]{width:24px;height:24px;flex:none}
/* v1.07.96: при системном шрифте ×1.6 длинные названия в строках справочников
и отчётов уезжали за край на 28…45px. Перенос внутри своей ячейки. */
.rowline .stock-ctl{flex-wrap:wrap}
.rowline .grow, .rowline .grow b, .rowline .grow .tiny,
.map-row .grow, .map-row .grow b{ min-width:0; overflow-wrap:anywhere; }
/* v1.07.84: классы стояли в разметке без единого правила (аудит v1.07.80) */
.size-presets{flex-wrap:wrap;gap:6px}
.aux-mk{display:inline-flex;align-items:center;margin-right:4px}
.aux-mk svg{width:1em;height:1em}
.chip{
display:inline-flex;align-items:center;gap:6px;border-radius:999px;
border:2px solid var(--line);padding:2px 10px;font-size:.72rem;font-weight:800;color:var(--dim)
}
.chip.ok{border-color:var(--green);color:var(--green)}
.chip.warn{border-color:var(--orange);color:var(--orange)}
.chip.bad{border-color:var(--red);color:var(--red)}
.chip.info{border-color:var(--blue);color:var(--blue)}
/* v1.07.10: общий доступ к документу для коворкеров */
.shared-chip{padding:1px 8px;gap:4px;vertical-align:1px}
.shared-chip .ic{width:.95em;height:.95em}
.shared-note{color:var(--blue);font-weight:800}
.shared-opt{width:100%;justify-content:flex-start}
.badge-status{font-size:.68rem;font-weight:900;border-radius:8px;padding:2px 8px;text-transform:uppercase}
.st-draft{background:#33454C;color:#cfe0e8}
.st-done{background:var(--blue);color:#04314A}
.st-approved{background:var(--purple);color:#2A0A45} /* v1.07.20: апрув фиолетовый везде */
/* ---------- Статчипы (как в LingoFlip) ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.stat{
border:2px solid var(--line);border-radius:14px;padding:8px 4px;text-align:center;background:var(--panel)
}
.stat .n{font-weight:900;font-size:1.15rem}
.stat .l{font-size:.6rem;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.stat.c-blue{border-color:var(--blue)} .stat.c-blue .n{color:var(--blue)}
.stat.c-green{border-color:var(--green)} .stat.c-green .n{color:var(--green)}
.stat.c-red{border-color:var(--red)} .stat.c-red .n{color:var(--red)}
.stat.c-gray .n{color:var(--text)}
/* v1.07.11: карточки дня — работы по видам и пикапы по оборудованию */
.stats-day{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.dcard{border:2px solid var(--line);border-radius:14px;padding:8px 10px;background:var(--panel);min-width:0}
.dcard.c-blue{border-color:var(--blue)} .dcard.c-blue .n{color:var(--blue)}
.dcard.c-gray .n{color:var(--text)}
.dcard-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.dcard-head .n{font-weight:900;font-size:1.25rem}
.dcard-head .l{font-size:.62rem;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.dcard-head .sm-chip{margin-left:auto;padding:1px 8px;font-size:.62rem}
.wt-lines{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.wt-line{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;min-width:0}
.wt-line .wt-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.wt-line b{color:var(--text)}
.wt-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.eq-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.eq-badge{display:flex;flex-direction:column;align-items:center;gap:2px}
.eq-badge b{font-size:.78rem}
.dim-empty{margin-top:6px}
.faq-example{border:2px dashed var(--line);border-radius:14px;padding:8px 10px;margin:6px 0 10px}
.faq-example .stats-day{margin:4px 0}
/* v1.07.12: модалка пикапа, продление аренды, история работы */
.pk-line .name{flex:1;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:800;min-width:0}
.hist-item{border:2px solid var(--line);border-radius:14px;padding:8px 10px;background:var(--panel);margin-top:8px}
.hist-item.hist-ext{border-color:var(--blue)}
.hist-t{font-weight:900;margin-bottom:4px}
/* v1.07.13: поиск на главной и кликабельная шапка */
.logo.clicky,.brand.clicky{cursor:pointer;-webkit-tap-highlight-color:transparent}
.logo.clicky:active{transform:scale(.95)}
.filter-row{display:flex;gap:8px;margin-bottom:10px;align-items:stretch}
.filter-row .lang-seg{margin:0;flex:0 0 auto}
.search-box{flex:1;display:flex;align-items:center;gap:7px;border:2px solid var(--line);border-radius:12px;background:var(--panel-2);padding:0 10px;min-width:0}
.search-box:focus-within{border-color:var(--blue)}
.search-box .ic{color:var(--dim);flex:0 0 auto}
.search-box input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text);font:inherit;font-weight:700;padding:9px 0}
.search-box input::placeholder{color:var(--dim);font-weight:600;font-size:.8rem}
.search-box input::-webkit-search-cancel-button{display:none}
.search-box .x{background:transparent;border:0;color:var(--dim);font-size:1rem;cursor:pointer;padding:2px 4px;flex:0 0 auto}
.search-box .x:active{color:var(--text)}
/* v1.07.14: бейдж роли слева от аватара (worker / manager / admin) */
.role-tag{
flex:0 0 auto;align-self:center;border:2px solid var(--line);border-radius:999px;
padding:3px 9px;font-size:.6rem;font-weight:900;letter-spacing:.6px;text-transform:uppercase;
color:var(--dim);background:var(--panel);white-space:nowrap
}
.role-tag.role-tech{border-color:var(--blue);color:var(--blue)}
.role-tag.role-manager{border-color:var(--red);color:var(--red)}
.role-tag.role-admin{border-color:var(--purple);color:var(--purple)}
/* ---------- Баннер пикапов ---------- */
.banner{
border:2px solid var(--green);border-radius:var(--r);
background:rgba(88,204,2,.08);padding:10px 12px;margin-bottom:10px;
display:flex;gap:10px;align-items:center;color:var(--green);font-weight:800
}
.banner.b-red{border-color:var(--red);background:rgba(255,75,75,.08);color:var(--red)}
/* v1.07.23: баннер установки на iOS и шаги в модалке */
.banner.a2hs{border-color:var(--blue);background:rgba(28,176,246,.08);color:var(--text)}
.banner.a2hs .grow{flex:1;min-width:0}
.banner.a2hs .tiny{font-weight:600;color:var(--muted,#9FB6C1)}
.a2hs-steps{display:flex;flex-direction:column;gap:12px;margin-top:6px;text-align:left}
.a2hs-step{display:flex;gap:10px;align-items:flex-start}
.a2hs-step .n{flex:0 0 24px;height:24px;border-radius:50%;background:var(--blue);color:#04314A;
font-weight:900;display:flex;align-items:center;justify-content:center}
.a2hs-step .ic{width:18px;height:18px;vertical-align:-3px;color:var(--blue)}
/* ---------- Нижняя навигация ---------- */
.tabbar{
position:fixed;left:0;right:0;bottom:0;z-index:40;
background:var(--bg);border-top:2px solid var(--line);
display:flex;justify-content:space-around;
padding:6px 6px calc(6px + env(safe-area-inset-bottom));
}
.tab{
flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:2px;
color:var(--dim);font-size:.62rem;font-weight:800;padding:6px 4px;border-radius:12px;text-transform:uppercase
}
.tab svg{width:24px;height:24px}
.tab.active{color:var(--blue);background:rgba(28,176,246,.1)}
/* v1.08.23: тесная раскладка таббара (12 вкладок у администратора) */
.tabbar.tb-tight .tab{padding:6px 2px;min-width:0}
.tabbar.tb-tight .tab svg{width:22px;height:22px}
.tabbar.tb-tight .tab span{
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.55rem
}
/* ---------- Модалки ---------- */
.overlay{
position:fixed;inset:0;background:rgba(5,10,13,.72);
z-index:1100; /* v1.07.55: выше панелей Leaflet (panes ≤700, контролы 1000) —
модалка «Новый комплекс с карты» уходила ПОД карту */
display:flex;align-items:center;justify-content:center;padding:12px;
}
.modal{
width:100%;max-width:480px;max-height:92dvh;overflow:auto;
background:var(--panel);border:2px solid var(--line);border-radius:20px;padding:14px;
}
.modal h3{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.modal .back-x{
width:36px;height:36px;border-radius:12px;border:2px solid var(--line);
display:grid;place-items:center;color:var(--dim);font-weight:900
}
.form-row{margin-bottom:10px}
.form-row>.lbl{display:block;font-size:.75rem;color:var(--dim);font-weight:800;margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.note-green{
border:2px solid var(--green);border-radius:12px;background:rgba(88,204,2,.08);
color:var(--green);padding:8px 10px;font-size:.8rem;font-weight:700
}
.note-purple{
border:2px solid var(--purple);border-radius:12px;background:rgba(206,130,255,.08);
color:var(--purple);padding:8px 10px;font-size:.8rem;font-weight:700
}
.note-red{
border:2px solid var(--red);border-radius:12px;background:rgba(255,75,75,.08);
color:var(--red);padding:8px 10px;font-size:.8rem;font-weight:700
}
/* ---------- Инвойс-форма ---------- */
.inv-sec{
border:2px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden;background:var(--panel)
}
.inv-head{
display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--panel-2);
font-weight:900
}
.inv-head .amt{margin-left:auto;color:var(--green);font-weight:900}
.inv-body{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.opt-grid{display:flex;flex-wrap:wrap;gap:8px}
.opt{
display:inline-flex;align-items:center;gap:7px;border:2px solid var(--line);
border-radius:12px;padding:7px 10px;background:var(--panel);font-weight:700;font-size:.85rem
}
.opt input{width:18px;height:18px}
.opt.on{border-color:var(--green);color:var(--green)}
.qty-line{display:flex;align-items:center;gap:8px;font-size:.85rem}
.qty-line .name{flex:1;font-weight:800}
.stepper{display:flex;align-items:center;gap:0;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.stepper button{width:34px;height:34px;font-weight:900;color:var(--blue);background:var(--panel-2)}
.stepper .val{min-width:34px;text-align:center;font-weight:900}
/* v1.07.53: степперы в настройках — редактируемое поле между − и ＋ */
.stepper.set-step > input.price-input{
border:0;border-radius:0;background:transparent;
width:52px;min-width:0;max-width:52px;height:34px;
text-align:center;font-weight:900;padding:0;
}
.stepper.set-step .val{min-width:52px;padding:0 6px}
.money{font-weight:900;color:var(--green)}
.total-bar{
/* без position:sticky — раньше панель плавала поверх полей формы и перекрывала их */
display:flex;align-items:center;gap:10px;
background:var(--panel-2);border:2px solid var(--green);border-radius:var(--r);
padding:10px 12px;margin:12px 0;font-weight:900
}
.total-bar .sum{margin-left:auto;font-size:1.3rem;color:var(--green)}
/* ---------- Таблицы справочников ---------- */
.rowline{
display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:2px solid var(--line-soft)
}
.rowline:last-child{border-bottom:none}
.rowline .grow{flex:1;min-width:0}
.icon-circle{
width:3.04em;height:3.04em;border-radius:50%; /* v1.07.79: em вместо px */display:grid;place-items:center;
color:#fff;font-weight:900;font-size:.7rem;border:2px solid rgba(255,255,255,.2);flex:0 0 auto
}
.color-dots{display:flex;gap:8px;flex-wrap:wrap}
.cdot{width:30px;height:30px;border-radius:50%;border:3px solid transparent}
.cdot.sel{border-color:#fff;box-shadow:0 0 0 3px var(--blue)}
.price-input{width:96px;text-align:right;padding:7px 9px}
/* v1.07.48: тонкий тёмный скроллбар — базовый, для всех режимов и всех
скролл-зон (раньше жил только в desktop.css: мобильная раскладка в
браузере показывала системный белый с полосой и стрелками). */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line,#31434C);border-radius:6px;border:2px solid var(--bg,#0F171B)}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabbtn{
border:2px solid var(--line);border-radius:12px;padding:8px 12px;
font-weight:800;color:var(--dim);white-space:nowrap;font-size:.82rem;background:var(--panel)
}
.tabbtn.active{background:var(--blue);border-color:var(--blue);color:#04314A}
/* ---------- Логин ---------- */
.login-wrap{max-width:420px;margin:8dvh auto 0;text-align:center}
.login-wrap .logo{width:76px;height:76px;font-size:2rem;margin:0 auto 14px;border-radius:20px}
.hello{font-size:1.5rem;font-weight:900;margin:6px 0 2px}
.demo-user{
display:flex;align-items:center;gap:12px;text-align:left;width:100%;
border:2px solid var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:8px;background:var(--panel)
}
.demo-user:active{transform:translateY(2px)}
.demo-user .avatar{width:40px;height:40px}
.role-tag{font-size:.62rem;font-weight:900;text-transform:uppercase;border-radius:8px;padding:2px 8px}
.rt-admin{background:var(--yellow);color:#4a3800}
.rt-manager{background:var(--purple);color:#2e0b4d}
.rt-tech{background:var(--blue);color:#04314A}
/* ---------- Тосты ---------- */
/* v1.07.83: место всплывашек выбирает пользователь (Настройки → «Всплывающие
подсказки»): tl-pop-top (по умолчанию, сверху по центру), tl-pop-bottom,
tl-pop-side. Раньше на телефоне тосты жили снизу, на ПК — в правом верхнем
углу поверх аватара, и выбора не было. */
#toasts{position:fixed;top:var(--pop-top,calc(env(safe-area-inset-top,0px) + 10px));bottom:auto;
left:0;right:0;z-index:1200;display:flex; /* v1.07.55: тосты поверх модалки (инвариант сохранён) */flex-direction:column;align-items:center;gap:8px;pointer-events:none}
html.tl-pop-bottom #toasts{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 82px);align-items:center}
html.tl-pop-side #toasts{left:auto;right:12px;align-items:flex-end}
.toast{
pointer-events:auto;max-width:92%;
background:var(--panel-2);border:2px solid var(--green);color:var(--text);
border-radius:14px;padding:10px 14px;font-weight:800;font-size:.85rem;
animation:pop .18s ease-out
}
.toast.err{border-color:var(--red)}
.toast.inf{border-color:var(--blue)}
@keyframes pop{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.settings-row{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:2px solid var(--line-soft)}
.settings-row:last-child{border-bottom:none}
.settings-row .d{font-size:.74rem;color:var(--dim);font-weight:600}
.lang-seg{display:flex;border:2px solid var(--line);border-radius:12px;overflow:hidden}
.lang-seg button{padding:8px 14px;font-weight:900;color:var(--dim);background:var(--panel-2)}
.lang-seg button.on{background:var(--blue);color:#04314A}
.list-empty{text-align:center;color:var(--dim-2);padding:26px 8px;font-weight:700}
.list-empty .big{font-size:2rem}
/* ============ v1.02: мобильное центрирование нижней панели ============ */
.tabbar{
left:50%; transform:translateX(-50%); width:100%; max-width:560px;
border-radius:18px 18px 0 0; border-left:2px solid var(--line); border-right:2px solid var(--line);
}
.tab span{font-size:.62rem}
.btn{text-transform:uppercase; letter-spacing:.4px}
.btn.sm{text-transform:none; letter-spacing:0}
/* ============ Карта ============ */
.map-box{
height:46vh; min-height:300px; border:2px solid var(--line); border-radius:16px;
overflow:hidden; margin-bottom:10px; background:#12202a;
}
.leaflet-container{background:#12202a; font-family:inherit}
.leaflet-popup-content-wrapper{background:var(--panel); color:var(--text); border-radius:12px; border:2px solid var(--line)}
.leaflet-popup-content{margin:10px 12px; font-size:.8rem; font-weight:700}
.leaflet-popup-content a{color:var(--blue)}
.leaflet-popup-tip{background:var(--panel)}
.leaflet-bar a{background:var(--panel); color:var(--text); border-bottom:1px solid var(--line)}
.leaflet-bar a:hover{background:var(--card)}
.map-controls .opt{width:100%; justify-content:flex-start; margin-top:8px}
.map-row{width:100%; text-align:left; background:var(--panel); border:2px solid var(--line);
border-radius:12px; margin-bottom:6px; padding:8px 10px; color:var(--text); cursor:pointer}
.map-row:active{transform:translateY(1px)}
.map-row .dot{width:14px; height:14px; border-radius:50%; flex:none; box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.map-row .dot.num{
width:auto;min-width:22px;height:22px;padding:0 5px;border-radius:11px;
display:grid;place-items:center;font-weight:900;font-size:.7rem
}
/* Сквозной номер строки на главном экране */
.row-num{
flex:0 0 auto;align-self:center;min-width:22px;height:22px;padding:0 5px;
border-radius:11px;background:var(--panel-2);border:2px solid var(--line);
color:var(--dim);display:grid;place-items:center;font-weight:900;font-size:.72rem
}
/* Нумерованный пин на карте дня (Leaflet divIcon) */
.map-pin{
min-width:26px;height:26px;padding:0 6px;border-radius:13px;
border:2px solid #0F171B;box-shadow:0 2px 6px rgba(0,0,0,.45);
display:grid;place-items:center;font-weight:900;font-size:.74rem;
white-space:nowrap;transform:translate(-50%,-50%)
}
/* ============ Заметки + диктовка ============ */
.note-ta{
width:100%; background:var(--card); color:var(--text); border:2px solid var(--line);
border-radius:12px; padding:10px 12px; font:inherit; font-weight:700; resize:vertical; min-height:64px;
}
.note-ta:focus{outline:none; border-color:var(--blue)}
.dict-row{display:flex; align-items:center; gap:10px; margin-top:8px}
/* v1.07.79 наследие: .dict-wrap стоял в разметке без единого правила */
.dict-wrap{display:block}
/* v1.08.02: демо-стрелки в справке — обычная иллюстрация, соседей рядом нет,
поэтому зону нажатия здесь расширить можно (в карточках работ нельзя). */
.faq-body .demo .mv{position:relative}
.faq-body .demo .mv::after{content:'';position:absolute;inset:-8px}
/* ============ v1.07.83: перевод заметок для PDF ============
Русский показываем как есть (только читать), английский правится. */
.tr-card .tr-row{margin:8px 0 10px}
.tr-card .tr-ru{
background:var(--panel); border:2px dashed var(--line); border-radius:12px;
padding:8px 10px; margin:2px 0 6px; font-weight:700; font-size:.86rem;
color:var(--dim); white-space:pre-wrap; overflow-wrap:anywhere;
}
.tr-card .tr-en{
width:100%; background:var(--card); color:var(--text); border:2px solid var(--line);
border-radius:12px; padding:8px 10px; font:inherit; font-weight:700; resize:vertical;
}
.tr-card .tr-en:focus{outline:none; border-color:var(--blue)}
.mic{
width:44px; height:44px; border-radius:50%; border:2px solid var(--line); background:var(--panel);
font-size:1.15rem; cursor:pointer; box-shadow:0 3px 0 #000a; flex:none;
}
.mic.rec{background:var(--red); border-color:var(--red); box-shadow:0 0 0 4px rgba(255,75,75,.25); animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 3px rgba(255,75,75,.3)}70%{box-shadow:0 0 0 10px rgba(255,75,75,0)}100%{box-shadow:0 0 0 3px rgba(255,75,75,0)}}
.lang-seg.sm button{padding:6px 10px; font-size:.7rem}
.note-line{color:var(--yellow); white-space:normal}
/* ============ Сотрудники ============ */
.role-sel{
background:var(--card); color:var(--text); border:2px solid var(--line); border-radius:10px;
padding:8px; font:inherit; font-weight:800; font-size:.75rem;
}
/* ============ v1.03: обязательные поля, бригада, полевые улучшения ============ */
.warn{
display:inline-flex; align-items:center; justify-content:center;
width:18px; height:18px; border-radius:50%; background:var(--yellow); color:#1c1400;
font-weight:900; font-size:.75rem; margin-right:6px; vertical-align:-3px;
box-shadow:0 2px 0 #7a5c00;
}
.warn.sm{
position:absolute; top:3px; right:3px; width:13px; height:13px; font-size:.58rem; margin:0;
box-shadow:0 1px 0 #7a5c00;
}
.day-cell{position:relative}
.crew-box{margin-top:10px; padding-top:10px; border-top:2px dashed var(--line)}
.crew-chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px}
.chip-tech{
display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
background:var(--card); border:2px solid var(--blue); color:var(--blue);
border-radius:999px; font-weight:900; font-size:.78rem;
}
.chip-tech.primary{border-color:var(--green); color:var(--green)}
.chip-tech .x{
background:none; border:none; color:inherit; font-weight:900; cursor:pointer;
font-size:.8rem; opacity:.8; position:relative;
/* v1.08.41: было 16×15 + прозрачное поле (20×23) — всё равно ниже нормы.
Теперь сама кнопка 24×24, а отрицательные поля не дают чипу вырасти. */
width:24px; height:24px; padding:0; display:inline-grid; place-items:center;
margin:-5px -6px -5px 0;
}
.crew-add{display:flex; gap:8px}
.crew-add select{flex:1}
.mini-nav{
background:var(--card); border:1.5px solid var(--line); color:var(--blue);
border-radius:8px; padding:4px 10px; min-height:24px; font:inherit; font-size:.68rem; font-weight:900; cursor:pointer;
}
.key-copy{
background:none; border:none; color:var(--yellow); font:inherit; font-weight:800; cursor:pointer; padding:0;
text-decoration:underline dotted;
/* v1.07.79: палец ловится по 24px, строка при этом не растёт — отрицательные поля */
display:inline-flex; align-items:center; min-height:24px; margin:-4px 0; vertical-align:-6px;
}
.today-jump{
display:block; margin:2px auto 10px; padding:6px 14px; border-radius:999px;
background:var(--card); border:2px solid var(--line); color:var(--text);
font:inherit; font-weight:900; font-size:.72rem; cursor:pointer;
}
.fab{
position:fixed; right:calc(50% - 280px + 16px); bottom:86px; z-index:60;
width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
background:var(--green); color:#fff; font-size:1.9rem; font-weight:900; line-height:1;
box-shadow:0 5px 0 var(--green-dk), 0 8px 22px #000a;
}
.fab:active{transform:translateY(3px); box-shadow:0 2px 0 var(--green-dk)}
@media (max-width:600px){ .fab{ right:16px } }
/* ============ Диагностика ============ */
.diag-pre{
background:var(--card); border:2px solid var(--line); border-radius:12px;
padding:10px 12px; font-size:.66rem; line-height:1.45; color:var(--text);
white-space:pre-wrap; word-break:break-word; max-height:52vh; overflow:auto;
font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
margin-bottom:12px;
}
/* ============ v1.03.08: футер, адаптивность ============ */
.app-footer{
margin:30px auto 100px; text-align:center;
color:var(--dim-2); font-size:.72rem; font-weight:800; line-height:1.75;
}
.app-footer.nofix{margin-bottom:30px}
/* сетки не ломаются на узких экранах */
.stats{grid-template-columns:repeat(auto-fit, minmax(76px, 1fr))}
.grid-2{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
/* нижняя панель: не наезжает на системные жесты, подписи не переполняются */
.tabbar{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.tab{min-width:0}
.tab span{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* совсем узкие экраны (до 380px) */
@media (max-width:380px){
.brand .name{font-size:1.08rem}
.brand .sub{font-size:.62rem}
.sync-btn,.icon-btn{width:36px;height:36px}
.avatar{width:40px;height:40px}
.avatar-wrap{width:46px}
.login-pill{max-width:46px;font-size:.55rem}
.role-tag{font-size:.52rem;padding:2px 6px;letter-spacing:.3px}
.tab span{font-size:.55rem;letter-spacing:0}
.day-cell{padding:6px 2px}
.day-cell .dom{font-size:.95rem}
.stat .n{font-size:1.1rem}
.btn{letter-spacing:.2px;font-size:.86rem}
.week .wk-arrow{width:28px}
}
/* крупные экраны: контент по центру, футер не прилипает к панели */
@media (min-width:700px){
.app-footer{margin-bottom:110px}
}
/* ============ v1.04: инвойс без нахлёстов, FAQ, панель дня ============ */
/* строки с количествами переносятся, не наезжая друг на друга */
.qty-line{flex-wrap:wrap;row-gap:8px}
.qty-line .name{min-width:110px}
.qty-line .money{margin-left:auto}
.stepper{flex:0 0 auto}
.opt{line-height:1.15}
.opt input{flex:0 0 auto}
.inv-head{gap:8px}
.inv-head .amt{flex:0 0 auto;padding-left:6px}
.inv-body{overflow:hidden}
/* панель выбранного дня под лентой недели */
.day-bar{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin:-4px 0 10px;padding:0 2px;font-size:.85rem;color:var(--dim);
}
.day-bar b{color:var(--text)}
/* FAQ */
.faq-body{
max-height:56vh;overflow:auto;margin-bottom:12px;padding-right:4px;
font-size:.84rem;line-height:1.55;
}
.faq-body h4{margin:12px 0 4px;font-size:.92rem}
.faq-body h4:first-child{margin-top:0}
.faq-body p{margin:0 0 6px;color:var(--dim)}
.faq-body b{color:var(--text)}
.faq-body i{color:var(--yellow);font-style:normal}
/* ============ v1.05: рельса приоритета и очерёдности ============ */
.item{position:relative}
.item.clicky{cursor:pointer;width:100%;text-align:left}
.rail{
display:flex;flex-direction:column;gap:4px;align-items:center;
flex:0 0 auto;margin-right:2px;
}
/* v1.07.41: на главной степпер ▲▼ привязан к НИЖНЕЙ границе карточки и
всегда ниже порядкового номера (номер — угол сверху). align-self:stretch
не годился: при переносе правой колонки на узких экранах flex-строка
рейла заканчивалась выше низа карточки. Колонка под кнопки резервируется
паддингом, поэтому absolute ни на что не наезжает. Доска (.bjob .brail)
не затронута: селектор — только прямой потомок .item.
v1.07.42: никакого :has для критичной геометрии — в браузере Абра он не
поддерживается. Класс has-rail ставит сам рендер (условие canReorder).
v1.07.43: резерв колонки — с !important. Причина: селекторы плотности
вида html.tl-desktop.tl-compact .item{padding:8px 10px} имеют
специфичность (0,3,1) и молча перебивали любой классовый резерв
(0,3,0) — номер и ▲▼ снова ложились на текст. Это ЕДИНСТВЕННОЕ
!important в проекте; любые будущие правила паддингов карточек обязаны
его уважать: колонка под номер и степпер неприкосновенна. */
.item > .rail{position:absolute;left:8px;bottom:10px;margin-right:0}
.item.has-rail{
padding-left:44px !important; /* 8 + 26 (кнопка) + 10 (зазор) */
min-height:92px; /* 26 (номер) + 4 + 52 (▲▼ по 24) + 10 */
}
.rail .mv{
width:26px;height:24px;border-radius:8px;border:2px solid var(--line);
background:var(--panel-2);color:var(--dim);font-size:.6rem;font-weight:900;
line-height:1;cursor:pointer;padding:0;
}
/* v1.07.96: палец шире кнопки. Расширяем зону нажатия прозрачным полем и
только НАРУЖУ: вверх у «выше», вниз у «ниже» — иначе две стрелки, стоящие
вплотную, перехватывали бы нажатия друг у друга. Вид и высота строки те же. */
/* Расширять зону стрелок нечем: между ними 4px, а сразу под карточкой стоит
такая же стрелка соседней. Любое поле наружу перехватывает нажатия у соседа —
«Диагностика» это ловит. Оставляем как есть; норму даст только правка вёрстки
карточки (развести стрелки), а это уже изменение дизайна. */
.rail .mv:active{transform:translateY(1px);color:var(--blue)}
.pri{
width:26px;height:24px;border:none;background:none;padding:0;cursor:pointer;
display:grid;place-items:center;
position:relative;
}
.pri::after{content:'';position:absolute;inset:-10px}
/* v1.08.03: у маркера внутри строки соседи стоят вплотную — на узких окнах
даже 3px накрывали кнопку копирования адреса под ним. Зону не расширяем
вовсе: сама кнопка уже 24×24, это норма. */
.pri.inline::after{content:none}
.tri{
display:inline-grid;place-items:center;
width:22px;height:19px;
clip-path:polygon(50% 0, 100% 100%, 0 100%);
background:#4a5a63;color:#fff;font-weight:900;font-size:.6rem;
padding-top:5px;line-height:1;transition:background .15s;
}
.pri.on .tri, span.pri.on .tri{background:var(--red);color:#0B1A22} /* v1.07.79: тёмная тушь по красному — 5.37 */
/* v1.07.41: треугольник в конце названия комплекса (главная).
.tail держит «Unit N» и треугольник одной неразрывной группой: между
текстом и inline-блоком есть точка переноса даже без пробела, и на
зауженном .info (ПК ≥1180px) значок падал на отдельную строку. */
.t .tail{white-space:nowrap}
.pri.inline{
/* v1.07.79: сама кнопка 24×24 (палец), треугольник прежние 20×17;
отрицательные поля держат высоту строки как была */
display:inline-grid;place-items:center;width:24px;height:24px;
padding:0;margin:-4px 0 -4px 4px;vertical-align:-5px;
}
.pri.inline .tri{width:20px;height:17px;font-size:.55rem;padding-top:4px}
.pri.on{filter:drop-shadow(0 0 5px rgba(255,75,75,.55))}
span.pri{display:grid;place-items:center;width:26px;height:24px}
/* ============ v1.06: шаблоны заметки ============ */
.ex-item{
border:2px dashed var(--line);border-radius:12px;padding:8px 10px;margin-bottom:8px;
background:var(--panel-2);
}
.ex-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;font-size:.85rem}
.ex-del{
width:26px;height:26px;border-radius:8px;border:2px solid var(--line);
background:var(--panel);color:var(--red);font-weight:900;cursor:pointer;padding:0;line-height:1;
}
/* ============ v1.06.02: неделя из 7 дней ============ */
.week{gap:4px}
.day-cell{padding:8px 2px;min-width:0}
.day-cell .dow{font-size:.58rem;letter-spacing:0}
.day-cell.wknd .dow{color:var(--dim-2)}
.day-cell.wknd:not(.sel):not(.today){opacity:.82}
@media (max-width:400px){
.week{gap:3px}
.week .wk-arrow{width:24px;font-size:1rem}
.day-cell{padding:7px 1px;border-width:2px}
.day-cell .dom{font-size:.9rem}
.day-cell .dow{font-size:.52rem}
.color-dots .dot{width:5px;height:5px}
}
/* ============ v1.06.03: неделя в одну прокручиваемую строку ============ */
.week{gap:6px}
.week .wk-arrow{flex:0 0 auto;width:30px}
.week-days{
display:flex;gap:6px;flex:1;min-width:0;
overflow-x:auto;overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
scrollbar-width:none;padding:2px 1px;
}
.week-days::-webkit-scrollbar{display:none}
.week-days .day-cell{
flex:0 0 54px;min-width:54px;scroll-snap-align:center;
padding:8px 3px;
}
.week-days .day-cell .dow{font-size:.6rem}
.week-days .day-cell .dom{font-size:1rem}
@media (max-width:400px){
.week-days .day-cell{flex-basis:50px;min-width:50px}
}
/* нижняя панель из 6 вкладок */
.tab span{font-size:.56rem}
@media (max-width:400px){ .tab span{font-size:.5rem} .tab svg{width:19px;height:19px} }
/* ============ v1.06.04: кнопки инвойса и размеры-пресеты ============ */
.back-top{
display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
background:var(--panel);border:2px solid var(--line);color:var(--dim);
border-radius:999px;padding:7px 14px;font:inherit;font-weight:900;font-size:.78rem;cursor:pointer;
}
.back-top:active{transform:translateY(1px)}
/* v1.08.02: при системном шрифте ×1.6 подписи «Просмотр PDF» и «Скачать PDF
инвойс» не помещались в свою колонку (+12 и +5px). Разрешаем перенос. */
.btn-row3 .btn, .btn-rowpp .btn{white-space:normal;line-height:1.1}
.btn-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.btn-row3 .btn{font-size:.76rem;padding:12px 4px;letter-spacing:.2px}
.chip-preset{
border:2px solid var(--line);background:var(--panel);color:var(--dim);
border-radius:999px;padding:6px 12px;font:inherit;font-weight:900;font-size:.76rem;cursor:pointer;
}
.chip-preset.on{border-color:var(--green);color:var(--green);background:rgba(88,204,2,.08)}
/* ============ v1.06.05: строка оборудования на маленьких экранах ============ */
.eq-line{flex-wrap:nowrap;gap:7px}
.eq-line .icon-circle{flex:0 0 auto}
.eq-name{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.12}
.eq-name .nm{font-size:.84rem;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-name .pr{font-size:.66rem;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eq-line .stepper{flex:0 0 auto}
.eq-line .stepper .val{min-width:26px} /* кнопки 34px не трогаем — ужимаем только табло */
.eq-line .eq-sum{flex:0 0 auto;min-width:46px;text-align:right}
.eq-line .eq-x,.eq-line .eq-dlbl{flex:0 0 auto}
@media (max-width:430px){ /* «дн.» дублирует цену и заголовок */
.eq-line{gap:6px}
.eq-line .eq-dlbl{display:none}
.eq-line .eq-sum{min-width:42px;font-size:.82rem}
}
@media (max-width:412px){ /* цена уходит в title и заголовок секции */
.eq-name .pr{display:none}
.eq-name .nm{font-size:.8rem}
}
@media (max-width:394px){ /* остаётся иконка с 3-буквенным кодом */
.eq-name{display:none}
.eq-line .eq-x{display:none}
}
@media (max-width:342px){ /* сверхузкие: чуть компактнее, но тапабельно */
.eq-line .stepper button{width:30px;height:32px}
.eq-line .stepper .val{min-width:22px}
.eq-line .eq-sum{min-width:36px;font-size:.78rem}
}
/* ============ v1.07: статистика ============ */
.section-title svg{width:20px;height:20px;vertical-align:-4px;color:var(--blue)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:10px;margin-bottom:12px}
.stat-lg{
background:var(--panel);border:2px solid var(--line);border-radius:16px;
padding:12px 12px 10px;
}
.stat-lg .n{font-size:1.45rem;font-weight:900;line-height:1.1}
.stat-lg .l{font-size:.74rem;font-weight:900;margin-top:2px}
.stat-lg .s{font-size:.64rem;color:var(--dim);margin-top:4px;line-height:1.35}
.stat-lg.c-green .n{color:var(--green)} .stat-lg.c-green{border-color:var(--green)}
.stat-lg.c-blue .n{color:var(--blue)}
.stat-lg.c-purple .n{color:var(--purple)}
.stat-lg.c-teal .n{color:var(--teal)}
.stat-lg.c-yellow .n{color:var(--yellow)}
.stat-lg.c-gray .n{color:var(--dim)}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:110px;padding-top:6px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.bar{width:100%;max-width:26px;background:linear-gradient(180deg,var(--green),var(--green-dk));border-radius:6px 6px 3px 3px;box-shadow:0 2px 0 #0007}
.bar-l{font-size:.56rem;color:var(--dim-2);font-weight:800}
/* нижняя панель из 7 вкладок */
.tab span{font-size:.5rem}
@media (max-width:400px){ .tab{padding:6px 0} .tab svg{width:18px;height:18px} }
@media (max-width:358px){ .tab span{display:none} .tab{padding:9px 0} .tab svg{width:21px;height:21px} }
/* ---------- Собственные контурные иконки ---------- */
.ic{width:1.1em;height:1.1em;display:inline-block;vertical-align:-.18em;flex:0 0 auto}
.inv-head .ic{width:19px;height:19px}
.mic .ic{width:20px;height:20px;vertical-align:-.28em}
.list-empty .big .ic{width:46px;height:46px}
h3 .ic{width:21px;height:21px}
/* ---------- Кнопка справки секции ---------- */
.help-btn{
width:20px;height:20px;border-radius:50%;border:2px solid var(--line);
background:var(--panel);color:var(--dim);font-weight:900;font-size:.66rem;
line-height:1;padding:0;margin-left:2px;flex:0 0 auto;cursor:pointer
}
.help-btn:active{color:var(--blue);border-color:var(--blue)}
.help-row{padding:9px 0;border-bottom:2px solid var(--line-soft)}
.help-row:last-child{border-bottom:none}
.help-row b{display:block;margin-bottom:2px}
/* ============ v1.07.05: карточки дня, шапка, неделя на ПК, DnD, справочники ============ */
/* --- шапка: подпись «учёт работ» рядом с названием --- */
.brand .name{display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
.brand .name .name-tag{
font-size:.66rem;font-weight:800;color:var(--dim);letter-spacing:.3px;
overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:380px){ .brand .name .name-tag{font-size:.58rem} }
/* --- неделя: на широких экранах дни растягиваются на всю ширину (без «дырки») --- */
.week-days .day-cell{flex:1 0 54px}
@media (max-width:400px){ .week-days .day-cell{flex:1 0 50px} }
/* --- карточка задания: № в левом верхнем углу, «!» — в правом, без 3-буквенного бейджа --- */
.item{
padding:26px 12px 10px;
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
/* v1.07.22: подсказка для мыши на ПК — карточку можно схватить и тянуть */
.item[data-can="1"]{cursor:grab}
.item.dragging, body.dnd-on{cursor:grabbing}
.item .row-num.corner{
position:absolute;top:6px;left:8px;height:20px;min-width:20px;z-index:2;
}
.pri.corner{
position:absolute;top:7px;right:8px;z-index:2;width:26px;height:24px;
}
.item .info .t{white-space:normal;overflow:visible;text-overflow:clip}
.item .info .s.addr{
display:flex;align-items:flex-start;gap:6px;
white-space:normal;overflow:visible;text-overflow:clip;
}
.item .info .s.addr .addr-txt{flex:1;min-width:0;overflow-wrap:anywhere}
.item .info .s.codes{white-space:normal;overflow:visible;text-overflow:clip;display:flex;flex-wrap:wrap;gap:2px 10px}
.copy-mini{
flex:0 0 auto;width:24px;height:24px;border-radius:8px;border:2px solid var(--line);
background:var(--panel-2);color:var(--blue);display:grid;place-items:center;
cursor:pointer;padding:0;margin-top:-3px;
}
.copy-mini .ic{width:14px;height:14px;vertical-align:0}
.copy-mini:active{transform:translateY(1px);border-color:var(--blue)}
/* --- перетаскивание карточек (long-press) --- */
.item.dragging{
z-index:30;border-color:var(--blue);opacity:.97;
box-shadow:0 10px 24px #000c, 0 0 0 3px rgba(28,176,246,.25);
transition:none;
}
body.dnd-on{cursor:grabbing}
body.dnd-on, body.dnd-on *{-webkit-user-select:none!important;user-select:none!important}
/* --- справочники: стрелки по бокам вкладок + drag-скролл --- */
.tabs-nav{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.tabs-nav .tabs{flex:1;min-width:0;margin-bottom:0;padding-bottom:2px;cursor:grab}
.tabs-nav .tabs.grabbing{cursor:grabbing}
.tabs-arr{
flex:0 0 auto;width:30px;height:38px;border:2px solid var(--line);border-radius:10px;
background:var(--panel);color:var(--dim);font-weight:900;font-size:1.05rem;padding:0;
}
.tabs-arr:active{color:var(--blue);transform:translateY(1px)}
/* --- справочник «Сотрудники»: без нахлёста имени и селекта --- */
select.role-sel{width:auto;flex:0 0 auto;max-width:46%}
.staff-row{flex-wrap:wrap;row-gap:8px}
.staff-row .grow{flex:1 1 150px}
.staff-row .grow .tiny{overflow-wrap:anywhere}
.staff-ctl{display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 1 auto;max-width:100%}
.staff-ctl select.role-sel{max-width:180px}
/* ============ v1.07.06: сотрудники — блокировка и пароль; справочник «Цены» ============ */
.staff-ctl .icon-btn{width:36px;height:36px;border-radius:10px}
.ban-btn{color:var(--red);border-color:var(--red)}
.ban-btn.off{color:var(--dim);border-color:var(--line)} /* уже заблокирован → кнопка «разблокировать» */
.ban-btn:active{transform:translateY(1px)}
.key-btn{color:var(--yellow)}
.chip-st{margin-left:8px;vertical-align:2px}
.staff-row.is-blocked .avatar,
.staff-row.is-blocked .grow b{opacity:.55}
.staff-row.is-blocked .grow b{text-decoration:line-through}
/* ============ v1.07.08: подпись логина в цвет роли; чипы ролей; «сегодня» ============ */
.login-pill.role-tech{border-color:var(--blue);color:var(--blue)}
.login-pill.role-manager{border-color:var(--red);color:var(--red)}
.login-pill.role-admin{border-color:var(--purple);color:var(--purple)}
.rt-admin{background:var(--purple);color:#2e0b4d}
.rt-manager{background:var(--red);color:#5a0f10}
.day-cell.today{border-color:var(--green)}
.day-cell.today:not(.sel) .dom{color:var(--green)}
.today-tag{color:var(--green);font-weight:900;letter-spacing:.2px}
/* v1.07.09: сегмент «Стандартные | Индивидуальные» — на всю ширину, пополам */
.lang-seg.seg-full{width:100%}
.lang-seg.seg-full button{flex:1 1 50%;text-align:center}
/* ============ v1.07.18: журнал действий (админ) — ядро ============ */
.chip.purple{border-color:var(--purple);color:var(--purple)}
.jr-row{align-items:flex-start;gap:10px}
.jr-when{min-width:78px;padding-top:3px;color:var(--dim-2)}
.jr-av{width:34px;height:34px;font-size:.72rem;flex:0 0 auto;border-width:2px}
.jr-row .grow b{margin-right:6px}
.jr-row .chip{vertical-align:1px}
/* =====================================================================
v1.07.25: круглый календарь, бейдж роли в шапке, Доска, № машины
===================================================================== */
.topbar .role-tag{border-color:transparent}
.day-cell{width:46px;height:46px;min-width:46px;border-radius:50%;padding:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}
.day-cell .dow{font-size:.56rem}
.day-cell .dom{font-size:.98rem}
.day-cell .mon{display:none}
.day-cell .dot-row{position:absolute;left:0;right:0;bottom:4px;margin:0;height:5px;justify-content:center}
.day-cell .dot{width:5px;height:5px}
.day-cell .warn{position:absolute;top:-5px;right:-3px}
.car-no{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
padding:0 5px;margin-left:4px;border-radius:999px;background:var(--blue);color:#04314A;
font-size:.68rem;font-weight:900;vertical-align:middle}
.car-inp{width:52px;text-align:center;padding:6px 4px}
.board{display:flex;gap:10px;align-items:flex-start;overflow-x:auto;
padding:2px 12px 90px;-webkit-overflow-scrolling:touch;
cursor:grab} /* v1.07.48: scroll-snap удалён — доска не подтягивается к краю карточки */
.board.panning{cursor:grabbing;user-select:none;-webkit-user-select:none}
.bcol{flex:0 0 232px;max-width:232px;background:var(--panel);border:2px solid var(--line);
border-radius:14px;padding:8px}
.bcol-h{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.bcol-h .avatar{width:34px;height:34px;font-size:.8rem}
.bjob{position:relative;background:#17232A;border:1px solid var(--line);
border-left:4px solid #8AA0AB;border-radius:10px;padding:6px 30px 6px 24px;margin:6px 0}
.bjob .bnum{position:absolute;left:7px;top:7px;font-size:.68rem;font-weight:900;color:var(--dim)}
.bjob .pri.corner{right:28px}
/* v1.08.41: .pri::after растит зону на 10px во все стороны, а справа в 2px от
маркера стоит рельса ▲▼ — «Диагностика» ловила перекрытие. Вправо не растём. */
.bjob .pri.corner::after{inset:-8px -1px -8px -8px}
.bjob .bwt{display:flex;align-items:center;gap:5px;margin-top:2px}
.bjob .dotc{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
/* v1.07.79: точка статуса — в левый жёлоб (под номером). Правый жёлоб
целиком отдан рельсе ▲▼: её кнопки выросли до 24px ради пальца и
перекрывали точку в углу. */
.bjob .bst{position:absolute;left:6px;bottom:8px;right:auto;width:9px;height:9px;border-radius:50%;background:#8AA0AB}
.bjob .bst.st-done{background:var(--blue)}
.bjob .bst.st-approved{background:var(--green)}
.bjob .brail{position:absolute;right:2px;top:2px;bottom:auto;display:flex;flex-direction:column;gap:2px}
/* карточке с рельсой нужен рост под две кнопки: 2 + 24 + 2 + 24 + 2 */
.bjob.has-brail{min-height:56px}
.bjob .brail .mv{width:24px;height:24px;font-size:.6rem;line-height:1;padding:0}
.bpk{background:#17232A;border:1px dashed var(--line);border-radius:10px;
padding:6px 8px;margin:6px 0;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.bpk.over{border:1px solid var(--red)}
.bpk.over > b{color:var(--red)}
.bext{color:var(--purple);font-weight:900}
.bempty{opacity:.6;text-align:center;padding:14px 0}
/* =====================================================================
v1.07.26: заголовок карточки к верху, компактная шапка, комбо-поиск,
склад, PROPOSAL-чип, серо/зелёный Итого
===================================================================== */
.item{align-items:flex-start}
.item .right{display:flex;flex-direction:column;align-items:flex-end}
/* v1.07.41: .rail прижат к низу (см. основной блок) — margin-top удалён */
.topbar .brand{min-width:0}
.brand .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:clamp(1rem,4.5vw,1.3rem)}
.brand .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:400px){ .name-tag{display:none} }
.info-i{cursor:pointer;opacity:.85;font-weight:900;margin-left:2px;
display:inline-grid;place-items:center;width:24px;height:24px;margin-top:-3px;margin-bottom:-3px;vertical-align:-6px}
/* v1.07.54: кнопка «?» FAQ раздела и вёрстка справки */
.faq-i{width:24px;height:24px;min-width:24px;border-radius:50%;border:2px solid var(--line);
color:var(--blue);font-weight:900;font-size:.78rem;margin-left:8px;vertical-align:2px;
display:inline-grid;place-items:center;background:var(--panel-2);cursor:pointer}
.faq-i:active{transform:scale(.92)}
.faqm{max-height:68vh;overflow:auto;padding-right:4px}
.faqm h4{margin:12px 0 4px;display:flex;align-items:center;gap:6px}
.faqm h4:first-child{margin-top:2px}
.faqm ul{margin:4px 0 8px;padding-left:18px}
.faqm li{margin:5px 0;line-height:1.35}
.faqm .demo{display:inline-flex;gap:5px;align-items:center;margin:1px 8px 1px 0;vertical-align:middle}
.faqm .badge-status{position:static}
.faqm .mv{pointer-events:none}
.total-bar .sum.pend{color:var(--dim)}
.total-bar .sum.ok{color:var(--green)}
.combo{position:relative;flex:1;min-width:0}
.combo-in{width:100%}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;display:none;
max-height:240px;overflow:auto;background:var(--panel);border:2px solid var(--line);border-radius:12px}
.combo-opt{padding:10px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.combo-opt:last-child{border-bottom:0}
.combo-opt:active,.combo-opt:hover{background:rgba(28,176,246,.12)}
.combo-opt.dim{opacity:.5;cursor:default}
.stock-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip.pr{border-color:var(--purple);color:var(--purple)}
/* =====================================================================
v1.07.27: пропозалы, согласование продлений, кнопки Просмотр/Печать
===================================================================== */
.btn-rowpp{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:8px 0} /* v1.07.46: зазор и над рядом */
.btn-rowpp > span{display:none}
.media-card{margin-top:10px} /* v1.07.46: «Фото и видео» отделён от секции выше */
.chip.pr{border-color:var(--purple);color:var(--purple)}
.chip.prq{border:1px dashed var(--purple);color:var(--purple);opacity:.85}
/* v1.08.23: документ ремонтных работ */
.chip.rep{border-color:var(--orange);color:var(--orange)}
.chip.repq{border:1px dashed var(--orange);color:var(--orange);opacity:.85}
.brep{margin-top:4px;display:flex;justify-content:flex-end}
.brep .btn{padding:3px 8px}
.banner.b-yellow{border-color:var(--yellow);background:rgba(255,200,0,.08);color:var(--yellow)}
/* v1.08.24: пометки «до/после» под миниатюрами фото в документе ремонта */
.rep-phs{display:flex;flex-wrap:wrap;gap:10px}
.rep-ph{display:flex;flex-direction:column;align-items:center;gap:4px}
.rep-ph-b{display:flex;gap:4px}
.rep-ph-b .chip{cursor:pointer;padding:3px 9px;font-size:.62rem;border:1px solid var(--line);
background:var(--panel-2);color:var(--dim)}
.rep-ph-b .chip.on{border-color:var(--green);color:var(--green);background:rgba(88,204,2,.14)}
.chip.pst{font-size:.6rem;text-transform:uppercase}
.pst-draft{border-color:var(--dim);color:var(--dim)}
.pst-sent{border-color:var(--blue);color:var(--blue)}
.pst-approved{border-color:var(--green);color:var(--green)}
.pst-declined{border-color:var(--red);color:var(--red)}
.pstrip{display:flex;gap:8px;overflow-x:auto;padding:2px 12px 8px;-webkit-overflow-scrolling:touch}
.pcard{flex:0 0 auto;min-width:150px;max-width:230px;background:var(--panel);
border:2px solid var(--line);border-radius:12px;padding:8px 10px}
.pcard .chip{margin-bottom:4px}
.reqcard{border-color:var(--yellow, #FF9600)}
.prop-row{display:flex;gap:6px;align-items:center;margin:4px 0}
.prop-row input.d{flex:1;min-width:0}
.prop-row input.a{width:86px;text-align:right}
/* =====================================================================
v1.07.28: правки по скриншотам
1) АДМИН поднят к верху, пилюля Телефон/ПК встаёт ПОД ним (см. viewmode.js);
2) конфликт классов: значок-кружок .warn ломал чипы .chip.warn
(«изменён инвойс», «ожидает вывоза») — текст вылезал из оранжевого
круга; возвращаем чипу нормальную геометрию;
3) дни недели снова прямоугольные, круглыми остаются только ‹ ›.
===================================================================== */
.topbar .role-tag{align-self:flex-start;margin-top:6px}
.chip.warn{
width:auto;height:auto;min-width:0;border-radius:999px;
background:transparent;box-shadow:none;margin-right:0;vertical-align:baseline;
display:inline-flex;align-items:center;gap:6px;padding:2px 10px;
font-size:.72rem;font-weight:800;
border:2px solid var(--orange);color:var(--orange);
}
.day-cell{
width:auto;height:auto;min-width:0;border-radius:var(--r-sm);
padding:6px 2px;display:block;position:relative;
}
.day-cell .dow{font-size:.62rem}
.day-cell .dom{font-size:1.02rem}
.day-cell .mon{display:block}
.day-cell .dot-row{position:static;display:flex;justify-content:center;gap:3px;height:6px;margin:3px 0 0}
.day-cell .dot{width:6px;height:6px}
.week .wk-arrow{width:36px;height:36px;border-radius:50%;align-self:center;padding:0}
/* =====================================================================
v1.07.29: правки по прогону в эмуляторе (360/390/412/768/1366)
===================================================================== */
/* Сотрудники: ряд управления переносится — кнопка блокировки не режется */
.staff-ctl{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}
/* Сег-переключатели умеют переноситься (статусы пропозала на 360px) */
.lang-seg{flex-wrap:wrap}
/* «сегодня» в ячейке дня — компактнее, не вылезает на 360px */
.day-cell .today-tag{font-size:.5rem;letter-spacing:0}
/* Узкие экраны: инфо карточки во всю ширину, действия — строкой ниже.
Лечит «адрес в столбик по буквам» на 360px. */
@media (max-width:430px){
.item{flex-wrap:wrap}
.item .info{flex:1 1 55%;min-width:0}
.item .right{flex:1 0 100%;display:flex;flex-direction:row;align-items:center;
justify-content:flex-end;gap:8px;margin-top:6px}
.item .right .eq-dots{margin-right:auto;justify-content:flex-start}
.item .right .money{margin-top:0}
}
/* Строки настроек переносятся на узких экранах (кнопка «Синхронизировать»
вылезала за 360px) */
.settings-row{flex-wrap:wrap;row-gap:6px}
/* =====================================================================
v1.07.30: собственные замечания из ревью — внедрены
===================================================================== */
/* ≤430px: подписи вкладок всё равно резались («ГЛАВН…») — только иконки,
крупнее и с нормальной зоной нажатия; активная вкладка выделена как раньше */
@media (max-width:430px){
.tabbar .tab span{display:none}
.tabbar .tab svg{width:24px;height:24px}
.tabbar .tab{padding:10px 0}
}
/* Тосты снизу — теперь только когда пользователь сам выбрал «снизу» */
html.tl-pop-bottom #toasts{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 82px)}
/* Доска: переключатель «Скрыть свободных» */
.board-tools{display:flex;justify-content:flex-end;padding:0 12px 6px}
.board-tools .opt{margin:0;padding:6px 10px;font-size:.72rem}
/* =====================================================================
v1.07.31: фото и видео (полоса миниатюр, просмотрщик, бейдж сети)
===================================================================== */
.mstrip{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mth{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;
background:#17232A;border:1px solid var(--line)}
.mth img{width:100%;height:100%;object-fit:cover;display:block}
.mth.loc{outline:2px dashed var(--orange);outline-offset:-2px}
.mth .mvid{position:absolute;left:4px;bottom:2px;color:#fff;text-shadow:0 0 4px #000;font-size:.8rem}
.mth .mst{position:absolute;right:3px;bottom:1px;font-size:.7rem}
/* v1.08.01: крестики были 18×17 и 25×24 — ниже нормы. Зону расширяем
прозрачным полем внутрь своего блока: соседей не задевает.
v1.08.41: у чипа исполнителя кнопка выросла до 24×24 сама (см. выше), поле
ей больше не нужно; у плитки медиа крестик добираем до 24 по высоте. */
.mth .mx::after{content:'';position:absolute;inset:-3px}
.mth .mx{position:absolute;top:0;right:0;min-width:24px;height:24px;padding:0 5px;color:#fff;
display:grid;place-items:center;
background:rgba(0,0,0,.55);border-radius:0 0 0 8px;cursor:pointer;font-weight:900}
.mfull{position:fixed;inset:0;background:rgba(4,10,14,.94);z-index:9999;
display:flex;align-items:center;justify-content:center;cursor:zoom-out}
.mfull img,.mfull video{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px}
/* v1.07.74: просмотрщик фото и видео — один и тот же на телефоне и на ПК.
v1.07.78: класс переименован .mv → .mviewer. Имя .mv с v1.07.05 занято
кнопками ▲▼ переноса карточек, и правило position:fixed;inset:0 цепляло
их тоже: две кнопки прилипали к левому верхнему углу окна, а демо-кнопки
▲▼ внутри FAQ (они не в .rail) разворачивались в чёрный лист на весь
экран и закрывали справку целиком. */
.mviewer{position:fixed;inset:0;z-index:9999;background:rgba(4,10,14,.96);
display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr;
align-items:center;animation:mv-in .16s ease-out}
/* защита от повторного столкновения имён: кнопки ▲▼ всегда в потоке */
.rail .mv, .brail .mv, .demo .mv{position:static;inset:auto;z-index:auto}
@keyframes mv-in{from{opacity:0}to{opacity:1}}
.mv-top{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:10px 12px;
padding-top:calc(10px + env(safe-area-inset-top,0px))}
.mv-title{flex:1;min-width:0;color:var(--text);font-weight:800;font-size:.85rem;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-btn{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;
color:var(--text);background:rgba(255,255,255,.08);border:2px solid var(--line);
border-radius:12px;cursor:pointer}
.mv-btn:active{transform:translateY(1px)}
.mv-btn .ic{width:20px;height:20px}
.mv-stage{grid-row:2;display:flex;align-items:center;justify-content:center;
padding:0 4px 12px;min-height:0;min-width:0}
.mv-stage img,.mv-stage video{max-width:100%;max-height:100%;object-fit:contain;
border-radius:10px;background:#000}
.mv-stage img.zoom{object-fit:cover;width:100%;height:100%;cursor:zoom-out}
.mv-wait{color:var(--dim);font-weight:800;font-size:.85rem;text-align:center;padding:20px}
.mv-wait.err{color:var(--red)}
.mv-nav{grid-row:2;width:52px;height:72px;display:grid;place-items:center;
color:#fff;background:rgba(255,255,255,.07);border:none;cursor:pointer;
border-radius:0 12px 12px 0}
.mv-nav.next{border-radius:12px 0 0 12px}
.mv-nav:hover{background:rgba(255,255,255,.16)}
.mv-nav .ic{width:26px;height:26px}
/* v1.07.74: состояние файла прямо на плитке */
.mth{transition:transform .12s ease-out}
.mth.clicky{cursor:zoom-in}
.mth.loc{cursor:pointer;animation:mth-in .18s ease-out}
@keyframes mth-in{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.mth.loc.bad{outline-color:var(--red);outline-style:solid}
.mth .mbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(0,0,0,.55)}
.mth .mbar i{display:block;height:100%;width:0;background:var(--green);transition:width .2s ease-out}
.mth.loc.bad .mbar i{background:var(--red)}
.mth:active{transform:scale(.96)}
.mstrip-hint{margin:-2px 0 8px;line-height:1.4}
/* v1.07.75: пока файл не ушёл — снимок приглушён и поверх крутится круг */
.mth.loc img{opacity:.55;filter:saturate(.8)}
.mth.loc.bad img{opacity:.7}
.mth .mspin{position:absolute;top:50%;left:50%;width:26px;height:26px;margin:-13px 0 0 -13px;
border-radius:50%;background:conic-gradient(var(--c,#5D737E) var(--p,10%), rgba(255,255,255,.16) 0);
-webkit-mask:radial-gradient(circle, transparent 54%, #000 56%);
mask:radial-gradient(circle, transparent 54%, #000 56%);
animation:mspin 1.05s linear infinite;pointer-events:none}
@keyframes mspin{to{transform:rotate(360deg)}}
/* и зелёная галочка, когда файл уже на Диске */
.mth .mdone{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
background:rgba(4,10,14,.35);animation:mdone .25s ease-out}
.mth .mdone .ic{width:28px;height:28px;color:var(--green-hi);
filter:drop-shadow(0 0 4px rgba(0,0,0,.7))}
@keyframes mdone{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.mth.done img{opacity:1}
/* v1.07.76: пока файл грузится, снимок слегка переливается */
.mth.loc::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
background-size:260% 100%;animation:mshine 1.6s ease-in-out infinite}
.mth.loc.bad::after{animation:none;background:none}
@keyframes mshine{0%{background-position:130% 0}100%{background-position:-30% 0}}
/* v1.07.77: плитка «готовлю снимок» — видна сразу, пока кадр обрабатывается */
.mth.prep{background:var(--panel-2);outline:2px dashed var(--blue);outline-offset:-2px;
animation:mth-in .18s ease-out}
.cam-set{padding:10px 0;border-top:2px solid var(--line-soft)}
.cam-set > b{display:block}
.cam-set .tiny{margin:3px 0 8px;line-height:1.4}
.lang-seg.cam-seg{width:100%;flex-wrap:wrap}
.lang-seg.cam-seg button{flex:1 1 0;min-width:0;text-align:center;padding:11px 6px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-seg.cam-q button{flex:1 1 40%} /* четыре подписи в один ряд обрезаются — 2×2 */
/* вложение «скрепкой»: плитка документа и кнопка под полосой */
.mth.file{display:grid;place-items:center;background:var(--panel-2)}
.mth .mfile{display:grid;place-items:center;gap:2px;color:var(--dim);text-align:center;padding:4px}
.mth .mfile .ic{width:24px;height:24px;color:var(--blue)}
.mth .mfile b{font-size:.62rem;letter-spacing:.04em;color:var(--text)}
.btn.sm.mattach{margin-top:8px;width:100%;justify-content:center}
/* v1.08.41: «Камера», «Галерея», «Прикрепить файл» выходили 37–38px — палец
требует 40. Отдельным правилом, чтобы не трогать все мелкие кнопки разом. */
.media-card .btn.sm{min-height:40px}
.mv-file{display:grid;place-items:center;gap:10px;color:var(--text);padding:24px;text-align:center}
.mv-file .ic{width:46px;height:46px;color:var(--blue)}
.mv-file .nm{font-weight:800;word-break:break-word;max-width:80vw}
#tl-net{position:fixed;left:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 86px);
z-index:95;display:none;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
background:var(--panel);border:2px solid var(--orange);color:var(--orange);
font-size:.7rem;font-weight:800;pointer-events:none}
/* v1.07.78: очередь пуста — та же табличка говорит «всё отправлено» */
#tl-net.ok{border-color:var(--green);color:var(--green)}
#gd-card .form-row input[readonly]{opacity:.8;font-size:.72rem}
#gd-health div{margin:2px 0}
/* ===== v1.07.33: редактор пропозала по образцу (Кол-во|Код|Описание|Сумма) ===== */
.prop-head{display:grid;grid-template-columns:46px 60px 1fr 78px 30px;gap:6px;
font-size:.6rem;color:var(--dim);font-weight:800;text-transform:uppercase;margin-bottom:2px;
/* v1.08.41: при шрифте ×1.6 «Кол-во» не влезало в колонку 46px — переносим */
overflow-wrap:anywhere;line-height:1.15}
.prop-row{display:grid;grid-template-columns:46px 60px 1fr 78px 30px;gap:6px;align-items:start;margin:6px 0}
.prop-row input.pq,.prop-row input.pa{text-align:right;padding:8px 6px}
.prop-row input.pc{padding:8px 6px}
.prop-row textarea.pd{resize:vertical;min-height:40px;line-height:1.3;width:100%}
.prop-row .btn{align-self:center;padding:6px 8px}
@media (max-width:430px){
.prop-head,.prop-row{grid-template-columns:38px 50px 1fr 64px 26px;gap:4px}
}
/* =====================================================================
v1.07.34: шапка — sticky и компактная; роль + переключатель одной
колонкой с единым правым краем; обрезаемые тексты — с фейдом
===================================================================== */
.rt-col{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin-left:auto}
.topbar .role-tag{align-self:auto;margin-top:0}
.rt-col .vm-seg{margin:0}
/* v1.07.95: на узких экранах пилюля режима остаётся в строке с логотипом,
а не уезжает под него — правил для <560px не было вовсе */
@media (max-width:560px){
.topbar{flex-wrap:nowrap}
.vm-inline{margin-left:auto;flex:none}
.vm-seg{transform:scale(.86);transform-origin:right center}
}
html:not(.tl-desktop) .topbar{
position:sticky;top:0;z-index:70;background:var(--bg);
padding:calc(env(safe-area-inset-top,0px) + 6px) 0 8px;
box-shadow:0 6px 12px -8px rgba(0,0,0,.8);
}
.topbar{margin-bottom:4px}
.section-title{margin:10px 0 8px}
.fade-clip{
text-overflow:clip !important;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 14px),transparent);
}
/* слот переключателя: резервирует место в колонке, размер задаёт JS */
#vm-slot{display:inline-block;min-height:26px}
/* =====================================================================
v1.07.35: аватарка ВСЕГДА синяя (роль остаётся цветной); бейдж роли
везде выглядит как в шапке (без серой рамки поверх заливки)
===================================================================== */
.avatar.role-admin,.avatar.role-manager,.avatar.role-tech{
border-color:var(--blue);color:var(--blue);background:var(--panel);
}
.login-pill{border-color:var(--blue);color:var(--blue)}
.role-tag{border-color:transparent}
/* =====================================================================
v1.07.37: фейд — там, где ему место. Подпись логина под аватаркой
снова с обычным троеточием (без растворения), а вот контент, уходящий
ПОД липкую шапку, растворяется градиентом вместо жёсткого обреза.
===================================================================== */
html:not(.tl-desktop) .topbar{ box-shadow:none; }
html:not(.tl-desktop) .topbar::after{
content:''; position:absolute; left:0; right:0; top:100%; height:16px;
background:linear-gradient(to bottom, var(--bg), rgba(15,23,27,0));
pointer-events:none;
}
/* =====================================================================
v1.07.38: переключатель — РОДНОЙ элемент шапки (никакого JS-позицио-
нирования): flex-колонка сама гарантирует общий правый край с ролью.
Логин под аватаркой — синий у всех ролей (перебиваем role-варианты).
===================================================================== */
.vm-inline{display:inline-flex;gap:4px;padding:3px;border-radius:999px;
background:var(--panel-2);border:2px solid var(--line);min-height:0}
.vm-inline button{display:grid;place-items:center;width:34px;height:26px;
border-radius:999px;background:transparent;color:var(--dim);border:0;padding:0}
.vm-inline button.on{background:var(--blue);color:#04314A}
.vm-inline svg{width:15px;height:15px}
.login-pill.role-tech,.login-pill.role-manager,.login-pill.role-admin{
border-color:var(--blue);color:var(--blue)}
/* id-правило #vm-slot (display:inline-block) било класс — уравниваем силу */
#vm-slot.vm-inline{display:inline-flex;flex-direction:row;min-height:0;width:auto;height:auto}
/* v1.08.41: «Создать такую же» и подсказка «?» — одной строкой. Раньше «?»
стоял ВНУТРИ кнопки: браузер такую вложенность разбирает по-своему и
выбрасывал «?» наружу, отдельным элементом поверх подвала документа. */
.tpl-row{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.tpl-row .btn{flex:1 1 auto}
/* ===== v1.07.58: подсказка о доступном пропозале в «Добавить задание» ===== */
.nt-prop-hit{display:flex;gap:6px;align-items:center;color:var(--green);
font-weight:800;font-size:.82rem;margin:-2px 0 8px}
/* ===== v1.07.61: неотправленные медиа + моточасы DHM ===== */
.mq-pop{position:fixed;left:50%;transform:translateX(-50%);
top:var(--pop-top,calc(env(safe-area-inset-top,0px) + 10px));bottom:auto;z-index:96;
background:var(--panel);border:2px solid var(--blue);border-radius:14px;
padding:10px 12px;max-width:min(430px,92vw);box-shadow:0 10px 30px rgba(0,0,0,.45)}
html.tl-pop-bottom .mq-pop{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
html.tl-pop-side .mq-pop{left:auto;right:12px;transform:none}
.mq-pop-t{font-weight:900;margin-bottom:2px}
.mq-ths{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}
.mq-th{width:52px;height:52px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
/* v1.07.63: журнал отправки — ровно пять строк, дальше прокрутка */
.mq-log{height:96px;overflow-y:auto;padding:6px 8px;background:var(--black-chip);
border:2px solid var(--line);border-radius:var(--r-sm);
font:700 .72rem/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* v1.07.83: строка журнала — две колонки. Раньше время и текст лежали в
одном потоке с white-space:pre-wrap: длинная строка переносилась под
отметку времени и текст выглядел съехавшим. */
.mq-log .mq-l{display:flex;gap:6px;align-items:flex-start;margin:1px 0;color:var(--text)}
.mq-log .mq-l > .m{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.mq-log .mq-tm{flex:none;color:var(--dim-2)}
.mq-log .ok{color:var(--green-hi)}
.mq-log .err{color:var(--red)}
.mq-log .warn{color:var(--yellow)}
.mq-log .dim{color:var(--dim)}
.btn.is-run{opacity:.7}
/* v1.07.65: рисованные иконки вместо эмодзи — выравнивание в мелких местах */
.toast .ic{width:16px;height:16px;vertical-align:-.18em;margin-right:6px;flex:0 0 auto}
.toast{display:flex;align-items:flex-start;gap:0}
.toast .t-txt{min-width:0;flex:1}
.toast .ic{margin-top:1px}
.mth .mvid .ic,.mth .mst .ic{filter:drop-shadow(0 0 3px #000)}
.mq-log .ic{width:13px;height:13px;vertical-align:-.15em}
.mvid .ic,.mst .ic,.mx .ic{width:13px;height:13px;vertical-align:-.15em}
#tl-net .ic{width:15px;height:15px;margin-right:4px}
.icon-btn.sm .ic{width:18px;height:18px}
.faqm .ic{vertical-align:-.2em}
/* v1.07.66: ссылки на юридические страницы в подвале */
.app-footer .legal-links{margin-top:6px}
.app-footer .legal-links a{color:var(--dim);text-decoration:underline}
.app-footer .legal-links a:hover{color:var(--blue)}
/* v1.07.64: карточка ключей Google Drive — маска, «глаз», копирование */
.gd-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.gd-val{display:flex;gap:6px;align-items:center}
.gd-val input{flex:1;min-width:0}
.icon-btn.sm{width:36px;height:36px;font-size:1rem}
.gd-status{margin:-2px 0 8px}
.gd-low{color:var(--red)}
.gd-ok{color:var(--green)}
.gd-hint{margin:-4px 0 10px;line-height:1.45}
.gd-mark{color:var(--green);background:rgba(88,204,2,.12);border-radius:5px;padding:0 3px}
/* v1.07.70: подзаголовок сквозной проверки в отчёте теста */
.gd-probe-h{margin:6px 0 2px;font-weight:900;color:var(--dim);text-transform:uppercase;font-size:.72rem;letter-spacing:.03em}
/* v1.07.72: мини-журнал отправки — три строки над панелью вкладок */
.mq-mini{position:fixed;left:8px;right:8px;z-index:60;
bottom:calc(66px + env(safe-area-inset-bottom));
background:var(--black-chip);border:2px solid var(--line);border-radius:var(--r-sm);
padding:6px 8px;font:700 .72rem/1.35 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer;max-width:560px;margin:0 auto}
.mq-mini .mq-mini-h{display:flex;align-items:center;gap:6px;color:var(--dim);
font-family:inherit;margin-bottom:3px}
.mq-mini .mq-mini-x{margin-left:auto;color:var(--blue)}
.mq-mini .mq-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0}
.mq-mini .ok{color:var(--green-hi)} .mq-mini .err{color:var(--red)}
/* пока мини-журнал на экране, тосты поднимаются над ним */
html.tl-pop-bottom body.has-mq-mini #toasts{bottom:calc(env(safe-area-inset-bottom,0px) + 178px)}
.mq-mini .warn{color:var(--yellow)} .mq-mini .dim{color:var(--dim)}
.banner .grow{flex:1;min-width:0;font-weight:800}
.pk-line{flex-wrap:wrap}
.pk-hours{display:flex;align-items:center;gap:4px;flex-wrap:wrap;width:100%;margin-top:2px}
.pk-h,.eq-h{width:72px;text-align:center;padding:5px 4px}
.eq-hline{margin:-2px 0 6px 40px;gap:6px}
/* =====================================================================
v1.07.67: узкие экраны и крупный шрифт — страница не должна ехать вбок.
Колонки грида по умолчанию не сжимаются уже своего содержимого
(min-width:auto), поэтому ряд из двух кнопок с длинными подписями
растягивал экран настроек на 320px и включал горизонтальную прокрутку —
вместе с ней «уезжала» и нижняя панель. Матрица устройств ловила это
на 320px и на любом экране при увеличенном шрифте.
===================================================================== */
.btn-rowpp{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
/* overflow-wrap:anywhere не переносит подписи в обычной жизни — он лишь
разрешает разорвать слово, когда места действительно нет. Без него
длинное «ПОДКЛЮЧИТЬ» держало колонку шире экрана при крупном шрифте. */
.btn{min-width:0;overflow-wrap:anywhere}
.btn > svg{flex:none}
.grid-2 > *, .grid-3 > *{min-width:0}
@media (max-width:360px){
.btn-rowpp{grid-template-columns:1fr}
.btn{padding:12px 10px;font-size:.82rem;letter-spacing:0}
.grid-3{grid-template-columns:1fr 1fr}
}
/* Длинные «слова» без пробелов — адрес папки Google Drive, ключи, пути —
переносим по буквам. Правило висит на всей подсказке, а не только на
выделенной части: адрес drive.google.com/drive/folders/…?usp=…
для браузера один неразрывный кусок, и переносить его должен тот
контейнер, в котором он лежит целиком. Иначе при увеличенном шрифте
строка растягивала экран настроек на 70px вместе с нижней панелью. */
.gd-hint, .gd-mark, .tiny code, pre{overflow-wrap:anywhere}
/* =====================================================================
v1.07.67: палец толще курсора. Мелкие круглые и строчные кнопки
(«?» у заголовков, «карта дня», стрелки недели, копирование кода)
остаются прежними на вид, но ловят нажатие в радиусе 44px —
прозрачным псевдоэлементом. Правило только для сенсорных экранов:
мышь попадает точнее, и на ПК расширенные зоны только мешали бы
соседним элементам.
===================================================================== */
@media (pointer: coarse){
.faq-i, .mini-nav, .key-copy, .week .wk-arrow{position:relative}
.faq-i::after, .mini-nav::after, .key-copy::after, .week .wk-arrow::after{
content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:max(100%, 44px); height:max(100%, 44px);
}
/* у парного переключателя «Телефон | Компьютер» соседи вплотную:
растём только по вертикали, иначе зоны налезут друг на друга */
.vm-inline button{position:relative}
.vm-inline button::after{content:''; position:absolute; left:0; right:0; top:-10px; bottom:-10px}
}
/* =====================================================================
===== v1.07.78 · КАЛЕНДАРЬ ДЛЯ ПОЛЕЙ ДАТЫ (#dsk-cal) — ОБЩИЙ =====
Открывает ui.js кликом по input[type=date] — одинаково на телефоне
и на ПК. Родная иконка пикера скрыта: календарь один на все режимы.
===================================================================== */
input[type="date"]::-webkit-calendar-picker-indicator{ display:none; }
input[type="date"]{ cursor:pointer; }
#dsk-cal{
position:fixed; z-index:10060; width:272px;
background:var(--panel,#17232A);
border:2px solid var(--line,#31434C); border-radius:16px;
box-shadow:0 14px 38px rgba(0,0,0,.5);
padding:10px; user-select:none;
}
#dsk-cal .dcal-h{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 6px; }
#dsk-cal .dcal-h b{ font-size:.92rem; }
#dsk-cal .dcal-nav{
width:32px; height:32px; border-radius:10px; cursor:pointer;
font:inherit; font-weight:900; font-size:1rem;
background:var(--panel-2,#1C2B33); color:var(--dim,#8AA0AB);
border:2px solid var(--line,#31434C);
}
#dsk-cal .dcal-w{
display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px;
font-size:.62rem; font-weight:900; letter-spacing:.4px; text-transform:uppercase;
color:var(--dim-2,#5D737E); text-align:center;
}
#dsk-cal .dcal-g{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
#dsk-cal .dcal-day{
height:32px; border-radius:9px; cursor:pointer;
font:inherit; font-weight:800; font-size:.8rem;
background:transparent; color:var(--text,#F1F7FB);
border:2px solid transparent;
}
#dsk-cal .dcal-day.out{ color:var(--dim-2,#5D737E); font-weight:600; }
#dsk-cal .dcal-day.today{ border-color:var(--dim,#8AA0AB); }
#dsk-cal .dcal-day.sel{
background:var(--green,#58CC02); border-color:var(--green,#58CC02);
color:var(--green-ink,#0E2A00); font-weight:900;
}
#dsk-cal .dcal-day.dis{ opacity:.3; cursor:default; }
#dsk-cal .dcal-f{ display:flex; gap:6px; margin-top:8px; }
#dsk-cal .dcal-btn{
flex:1; padding:8px 0; border-radius:10px; cursor:pointer;
font:inherit; font-weight:900; font-size:.72rem; letter-spacing:.3px; text-transform:uppercase;
background:var(--panel-2,#1C2B33); color:var(--dim,#8AA0AB);
border:2px solid var(--line,#31434C);
}
@media (hover:hover){
#dsk-cal .dcal-day:not(.sel):not(.dis):hover{ border-color:var(--blue,#1CB0F6); }
#dsk-cal .dcal-nav:hover, #dsk-cal .dcal-btn:hover{ border-color:var(--blue,#1CB0F6); color:var(--blue,#1CB0F6); }
#dsk-cal .dcal-nav:hover .ic{ color:var(--blue,#1CB0F6); }
}
#dsk-cal .dcal-nav{ display:grid; place-items:center; }
#dsk-cal .dcal-nav .ic{ width:18px; height:18px; }
/* =====================================================================
v1.07.78 · ЕДИНЫЙ ВЫПАДАЮЩИЙ СПИСОК (.tl-dd) для всех