/* AMS — дизайн-токены из хендоффа. Сетка 8 px, Inter + JetBrains Mono. */ :root{ --bg-app:#F4F6F9; --bg-surface:#FFFFFF; --bg-subtle:#FAFCFE; --bg-muted:#F8FAFC; --bg-calc:#FAFBFC; --bg-row-alt:#FCFDFE; --bg-header:#EEF2F6; --bd-strong:#D8DDE3; --bd-medium:#E3E8EE; --bd-subtle:#EEF2F6; --bd-faint:#F2F5F8; --tx-primary:#1F2D3D; --tx-secondary:#37475A; --tx-muted:#6B7480; --tx-faint:#96A0AC; --blue:#1D8CF0; --blue-hover:#1670C4; --blue-bg:#EAF4FE; --blue-bd:#BFDDFA; --green:#1E7E34; --green-hover:#19692C; --green-bg:#E7F3EA; --green-corridor:#D6EBD9; --amber:#8A5A00; --amber-bg:#FDF8EC; --amber-bg-tag:#FDF0D9; --amber-bd:#F0DDB4; --red:#C0392B; --red-bg:#FBEDEB; --red-bd:#F2C4BD; --grey:#CBD3DC; /* Цвета серий на графиках: восемь слотов в неизменном порядке. Оттенки не подбираются на лету — порядок проверен на различимость, в том числе при дальтонизме; девятой серии не бывает, она уходит в «прочие». */ --s1:#2A78D6; --s2:#EB6834; --s3:#1BAF7A; --s4:#EDA100; --s5:#E87BA4; --s6:#008300; --s7:#4A3AA7; --s8:#E34948; /* тёмный ряд той же палитры: им рисуют план рядом с фактом своего цвета — связь с сезоном видна, а спутать столбик с линией уже нельзя */ --d1:#0F3F7E; --d2:#9B3A11; --d3:#0C6B49; --d4:#8C5F00; --d5:#9A3F60; --d6:#004B00; --d7:#2A2064; --d8:#8A2320; /* Девятый и дальше: средств в направлении бывает больше десятка, и на восьми цветах они начинали повторяться — два синих слоя в одном столбике различить нельзя */ --s9:#0FA3B1; --s10:#B07AA1; --s11:#7F8C2A; --s12:#C46A00; --d9:#08636C; --d10:#6E4865; --d11:#4E5619; --d12:#7A4100; --s-other:#96A0AC; --p-prep:#DCE9F7; --p-pre:#E5E1F5; --p-comp:#F7E2DC; --p-trans:#E6EDE7; --ev-camp:#37475A; --ev-exam:#7A5EA8; --row-h:32px; } html,body{margin:0;padding:0} *{box-sizing:border-box} body{background:var(--bg-app);color:var(--tx-primary);font-family:Inter,"Helvetica Neue",Arial,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased} a{color:var(--blue);text-decoration:none} a:hover{color:var(--blue-hover);text-decoration:underline} input,select,textarea,button{font-family:inherit;font-size:inherit;color:inherit} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--grey);border-radius:6px;border:2px solid var(--bg-app)} ::-webkit-scrollbar-track{background:transparent} .amsx::-webkit-scrollbar-thumb{border-color:#fff} .mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace} .tnum{font-variant-numeric:tabular-nums} /* ---------- каркас ---------- */ .shell{display:flex;height:100vh;width:100%;overflow:hidden;background:var(--bg-app)} nav.side{width:260px;flex:0 0 auto;background:#fff;border-right:1px solid var(--bd-strong); display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(16,24,40,.08);transition:width .16s ease;overflow:hidden} nav.side.collapsed{width:64px} .side-logo{height:56px;display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--bd-medium);flex:0 0 auto;overflow:hidden} .side-mark{width:26px;height:26px;border-radius:6px;background:var(--blue);flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;letter-spacing:-.5px} .side-name{font-weight:600;font-size:15px;letter-spacing:-.2px;white-space:nowrap;line-height:1.15} /* название по-русски — второй строкой под латинским (закон о русском языке) */ .side-name-ru{display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--tx-muted)} .side-scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:8px 0 16px} .nav-group{padding:10px 0 2px} .nav-title{padding:4px 16px 6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-faint);white-space:nowrap} .nav-rule{height:1px;background:var(--bd-medium);margin:6px 14px 8px} .nav-item{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 16px;font-size:13.5px;color:var(--tx-secondary);cursor:pointer;text-decoration:none} .nav-item:hover{background:#F1F5F9;text-decoration:none;color:var(--tx-secondary)} .nav-item.active{background:var(--blue-bg);color:var(--blue);font-weight:600;box-shadow:inset 3px 0 0 var(--blue)} .nav-item .ico{width:16px;height:16px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--tx-muted)} .nav-item.active .ico{color:var(--blue)} .nav-item .lbl{flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-badge{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--blue);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center} .nav-dot{position:absolute;top:6px;right:14px;width:7px;height:7px;border-radius:4px;background:var(--blue);border:1.5px solid #fff} .side-toggle{height:40px;display:flex;align-items:center;gap:10px;padding:0 16px;border-top:1px solid var(--bd-medium);font-size:12.5px;color:var(--tx-muted);cursor:pointer;flex:0 0 auto} .side-toggle:hover{background:#F1F5F9;color:var(--tx-primary);text-decoration:none} .side-toggle .ico{width:16px;height:16px;display:flex;align-items:center;justify-content:center} /* Свёрнутое меню — один класс на nav: оба вида уже в разметке, поэтому свернуть и раскрыть можно без перезагрузки. На телефоне меню выезжает всегда полным. */ .nav-rule,.nav-dot,.side-toggle .t-open{display:none} @media (min-width:821px){ nav.side.collapsed .side-name,nav.side.collapsed .nav-title,nav.side.collapsed .nav-item .lbl, nav.side.collapsed .nav-badge,nav.side.collapsed .side-toggle .t-close{display:none} nav.side.collapsed .nav-rule,nav.side.collapsed .nav-dot{display:block} nav.side.collapsed .side-toggle .t-open{display:flex} /* Человек и выход внизу меню — только для телефона: на компьютере они есть в шапке, а внизу меню «Выход» путали со «Свернуть меню» */ nav.side .side-me,nav.side .side-exit{display:none} } .main-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column} header.top{height:56px;flex:0 0 auto;background:#fff;border-bottom:1px solid var(--bd-strong);display:flex;align-items:center;gap:14px;padding:0 20px} header.top .lb{font-size:13px;color:var(--tx-muted)} header.top select{height:30px;min-width:0;border:1px solid var(--bd-strong);border-radius:4px;background:#fff;padding:0 8px;font-size:13px;font-weight:500} header.top input.q{width:100%;height:30px;border:1px solid var(--bd-strong);border-radius:4px;padding:0 10px;font-size:13px;background:var(--bg-muted)} .top-user{display:flex;align-items:center;gap:10px;padding-left:14px;border-left:1px solid var(--bd-medium);flex:0 0 auto} .avatar{width:30px;height:30px;border-radius:15px;background:var(--bg-header);color:var(--tx-primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:0 0 auto} /* Место под полосу прокрутки держим всегда. Иначе на коротком экране полосы нет, а на длинном она появляется, рабочая область становится уже на её ширину — и кнопки в шапке, стоявшие в строке заголовка, перескакивают на строку ниже. При переходе по вкладкам это выглядит как прыгающая вёрстка. */ main.work{flex:1 1 auto;overflow:auto;padding:20px 24px 48px;scrollbar-gutter:stable} /* ---------- типографика ---------- */ h1.scr{margin:0 0 4px;font-size:28px;font-weight:600;letter-spacing:-.4px} .crumb{font-size:12px;color:var(--tx-muted);margin-bottom:4px} /* возврат в строке пути: заметнее остального пути, но тише заголовка */ .crumb a.back{color:var(--blue);text-decoration:none;font-weight:500} .crumb a.back:hover{text-decoration:underline} .sub{font-size:13px;color:var(--tx-muted)} .sec-title{font-size:15px;font-weight:600} /* Подзаголовок внутри карточки: делит список на части и должен читаться как заголовок, а не как пояснение под полем. */ .sub-title{font-size:13.5px;font-weight:600;color:var(--tx-primary);letter-spacing:.01em; padding-bottom:4px;border-bottom:1px solid var(--bd-subtle);margin-bottom:10px} .card-title{font-size:14px;font-weight:600} .caption{font-size:12px;color:var(--tx-muted)} .faint{font-size:10.5px;color:var(--tx-faint)} .kpi-num{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.4px} /* ---------- элементы ---------- */ .card{background:#fff;border:1px solid var(--bd-strong);border-radius:8px} .card.pad{padding:14px} .page-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:14px;flex-wrap:nowrap} /* Кнопки шапки стоят справа и не прыгают: при переносе строк flex раскладывает по «желаемой» ширине, а не по сжатой, и длинный подзаголовок уводил их под заголовок — на соседней вкладке с подзаголовком покороче они возвращались назад, и кнопка оказывалась то там, то тут. Поэтому шапка идёт одной строкой: переносится подзаголовок, а не кнопки. На узком экране перенос возвращается — там кнопкам рядом с заголовком уже не поместиться. */ .page-head > .grow{min-width:0} @media (max-width:1100px){.page-head{flex-wrap:wrap}} .page-head .acts{display:flex;align-items:center;gap:8px;flex:0 0 auto;padding-top:22px;flex-wrap:wrap} .btn{height:32px;padding:0 12px;border:1px solid var(--bd-strong);border-radius:4px;background:#fff; display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;color:var(--tx-primary);white-space:nowrap} .btn:hover{border-color:var(--blue);color:var(--blue);text-decoration:none} .btn.primary{background:var(--green);border-color:var(--green);color:#fff;font-weight:500} .btn.primary:hover{background:var(--green-hover);border-color:var(--green-hover);color:#fff} .btn.blue{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500} .btn.blue:hover{background:var(--blue-hover);border-color:var(--blue-hover);color:#fff} .btn.danger{color:var(--red)} .btn.danger:hover{border-color:var(--red);background:var(--red-bg);color:var(--red)} .btn.sm{height:28px;padding:0 10px;font-size:12px} /* Часы лентой: один столбик — один час. Прокручивается вбок, потому что суток трое, а не один экран; разделитель дня не даёт потерять, где кончился четверг. */ .wxhours{display:flex;align-items:stretch;gap:2px;min-width:max-content;padding-bottom:4px} .wxh{flex:0 0 58px;text-align:center;padding:6px 2px;border-radius:4px; border:1px solid transparent} .wxh:hover{background:var(--bg-muted)} .wxh .t{font-size:11px;color:var(--tx-muted)} .wxh .v{font-size:15px;font-weight:600;margin-top:2px} .wxh .w{font-size:11px;color:var(--tx-muted)} .wxh .p{font-size:11px;color:var(--blue);min-height:14px} /* влажность: при сухом воздухе снег абразивный, при влажном липнет */ .wxh .hm{font-size:11px;color:var(--tx-muted);min-height:14px} .wxh .hm.hi{color:var(--blue);font-weight:600} /* служба сказала «осадков не будет»: это не то же, что «числа нет» */ .wxh .p.zero{color:var(--tx-faint)} .wxh .pp{font-size:10px;color:var(--tx-faint)} .wxh .pp.hi{color:var(--blue);font-weight:600} /* снегопад — отдельной строкой: «2 мм» и «2 см снега» на склоне разные вещи */ .wxh .sn{font-size:11px;color:var(--tx-muted);min-height:14px} .wxh .sn.hi{color:var(--violet, #6a3fb5);font-weight:600} /* час ниже нуля: по нему и выбирают, когда ехать */ .wxh.cold{background:var(--blue-bg)} .wxhday{flex:0 0 auto;align-self:stretch;display:flex;flex-direction:column; justify-content:center;padding:0 10px;margin-right:2px; border-left:2px solid var(--blue-bd)} .wxhday .d{font-size:12px;font-weight:600} .wxhday .n{font-size:11px;color:var(--tx-muted)} /* Итоговая строка таблицы: она не одна из перечисленных, а вывод из них — в списке служб это сводка, которой и пользуются. */ .t tbody tr.sumrow>td{background:var(--blue-bg);border-top:1px solid var(--blue-bd)} /* Кнопка ведёт туда, где пока пусто: нажать можно, но видно, что данных там нет. Нужна дням прогноза, которые ещё не спрашивали. */ .btn.dim{color:var(--tx-faint);border-color:var(--bd-subtle)} .btn.dim:hover{color:var(--blue);border-color:var(--blue)} .btn.wz{height:34px;padding:0 16px} .btn[disabled],.btn.off{background:var(--grey);border-color:var(--grey);color:#fff;cursor:not-allowed} .btn.off:hover{background:var(--grey);border-color:var(--grey);color:#fff} .inp{height:30px;border:1px solid var(--bd-strong);border-radius:4px;padding:0 8px;font-size:13px;background:#fff;width:100%} .inp:focus{outline:none;border-color:var(--blue)} textarea.inp{height:auto;padding:6px 8px;line-height:1.45} .field{margin-bottom:12px} /* Строка «поле + кнопка»: у поля снизу свои 12px, и кнопка, выровненная по нижнему краю, съезжает под список. */ .crewrow .field{margin-bottom:0} .field .lb{font-size:11px;color:var(--tx-muted);margin-bottom:3px} .tabs{display:flex;border:1px solid var(--bd-strong);border-radius:4px;overflow:hidden} .tabs a,.tabs button{padding:0 12px;height:28px;display:flex;align-items:center;font-size:13.5px;color:var(--tx-secondary); background:#fff;border:none;border-right:1px solid var(--bd-strong);white-space:nowrap;cursor:pointer} .tabs a:last-child,.tabs button:last-child{border-right:none} .tabs a:hover,.tabs button:hover{background:var(--bg-muted);text-decoration:none} .tabs a.on,.tabs button.on{background:var(--blue-bg);color:var(--blue);font-weight:600} .tag{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:9px;font-size:11px;font-weight:600;white-space:nowrap} .tag.ok{background:var(--green-bg);color:var(--green)} .tag.warn{background:var(--amber-bg-tag);color:var(--amber)} .tag.bad{background:var(--red-bg);color:var(--red)} .tag.info{background:var(--blue-bg);color:var(--blue)} .tag.mute{background:var(--bg-header);color:var(--tx-muted)} .tag.spec{background:var(--red-bg);color:var(--red);border:1px solid var(--red-bd)} /* Справка-плашка: та же геометрия, что у свёрнутой справки (details.infobox), чтобы рядом они читались как одно семейство, а не как разные по важности */ .banner{border-radius:6px;padding:8px 12px;font-size:13px;margin-bottom:12px;line-height:1.45} .banner.info{background:var(--blue-bg);border:1px solid var(--blue-bd)} /* ссылка-плашка ведёт себя как плашка, а не как ссылка */ a.banner{display:block;text-decoration:none;color:inherit} .banner.warn{background:var(--amber-bg);border:1px solid var(--amber-bd)} .banner.bad{background:var(--red-bg);border:1px solid var(--red-bd)} .banner b{font-weight:600} .grid-kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .grid-sum{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px} .two-col{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px} /* содержимое колонки прокручивается внутри себя, а не растягивает страницу */ .two-col > *{min-width:0} /* Схема и карточка: ширину карточке задают её поля, а не ширина экрана — в долях она разрасталась, и половина её оставалась пустой. Остальное место уходит схеме, которой его всегда мало. */ .two-col.orgtwo{grid-template-columns:minmax(0,1fr) minmax(0,560px)} /* Часть карточки: отчёркнута от предыдущей одинаково во всех карточках */ .cardsec{border-top:1px solid var(--bd-subtle);margin-top:14px;padding-top:14px} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px} /* Форма в узкой карточке: сколько полей встанет в ряд, решает ширина, а не число полей. Тремя столбцами в боковой карточке подпись «ответственный за дисциплину» сжимается до полутора слов. */ .formgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(0,240px));gap:10px 14px} /* display в правиле класса сильнее браузерного [hidden]: скрытый блок остался бы на экране, и форма показывала бы места всех команд разом */ .formgrid[hidden]{display:none} .grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px} /* Форма, поля которой заполняют по порядку бланка: каждое занимает свою ячейку целиком. Пока ширину задавали полю поимённо, в колонке по 240 точек оставались пустые хвосты, и строка читалась рвано. Поле, которому нужна вся строка — перечень галочек, длинное название, — берёт её классом wide. */ /* Свёрнутый бланк: заголовок кликается, стрелка слева, развёрнутый отделяется от содержимого отступом. Иначе он читается как служебная «деталька», а это главная форма экрана. */ .foldform > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px} .foldform > summary::-webkit-details-marker{display:none} .foldform > summary::before{content:'▸';color:var(--tx-muted);font-size:12px} .foldform[open] > summary::before{content:'▾'} .foldform[open] > summary{margin-bottom:4px} /* min-width:0 обязателен: длинные варианты списка иначе раздвигают ячейку, и ряд перестаёт быть ровным */ .formgrid.even .inp{width:100%;max-width:100%;min-width:0} .formgrid.even .field.wide{grid-column:1/-1} @media(max-width:1100px){.two-col,.grid3,.grid4{grid-template-columns:1fr}} /* ---------- таблицы ---------- */ .tw{background:#fff;border:1px solid var(--bd-strong);border-radius:8px;overflow:auto} table.t{border-collapse:separate;border-spacing:0;width:100%;font-size:13px} table.t.dense{font-size:12.5px} table.t thead th{position:sticky;top:0;z-index:2;background:var(--bg-header);border-bottom:1px solid var(--bd-strong); padding:8px 10px;text-align:left;font-size:11px;font-weight:600;color:var(--tx-muted); text-transform:uppercase;letter-spacing:.03em;white-space:nowrap} table.t tbody td{border-bottom:1px solid var(--bd-subtle);padding:0 10px;height:var(--row-h);vertical-align:middle} table.t tbody tr:nth-child(even){background:var(--bg-row-alt)} table.t tbody tr:hover{background:var(--bg-muted)} /* строка, которую сейчас смотрят: списки прохождений открывают данные ниже на той же странице, и без отметки непонятно, чья это таблица */ table.t tbody tr.sel,table.t tbody tr.sel:nth-child(even){background:var(--blue-bg);box-shadow:inset 3px 0 0 var(--blue)} table.t tbody tr.sel td.sticky{background:var(--blue-bg)} table.t td.calc,table.t td.num{text-align:right;font-variant-numeric:tabular-nums} table.t th.num{text-align:right} table.t td.calc{background:var(--bg-calc);color:var(--tx-secondary)} /* граница между группами колонок: соседние одинаковые числа иначе читаются как одно продолжающееся, особенно когда оба отклонения красные */ table.t th.colsep,table.t td.colsep{border-left:1px solid var(--bd-medium);padding-left:16px} /* Две шкалы подряд — целевой коридор и выполнение плана — тонкой чертой не разделяются: обе светло-серые, на одной высоте, и читаются как одна длинная полоса. Здесь граница заметная, а сами шкалы обведены — две обведённые фигуры рядом уже не сливаются. */ table.t th.colsep.hard,table.t td.colsep.hard{border-left:2px solid var(--bd-strong)} table.t td.colsep.hard .scale,table.t td.colsep.hard .bar{border:1px solid var(--bd-strong)} /* План — факт: подписи колонок длиннее своих чисел, и в одну строку они растягивали таблицу за край окна. Здесь подпись переносится, число — никогда, а подпись под шкалой держится одной строкой: разорванная пополам, она ломала и без того тесные шкалы. */ table.t.mpfd thead th{white-space:normal;line-height:1.25} table.t.mpfd tbody td.num,table.t.mpfd tbody td.calc{white-space:nowrap} table.t.mpfd td.colsep.hard .faint{white-space:nowrap} table.t tr.err td{background:var(--red-bg)} /* Заголовок части в разборе плана дня: это не строка данных, а граница между разнородными частями — средствами, итогами по ним и работой сверх плана. Складывать строки разных частей нельзя, и граница должна быть видна. */ /* Предложение занести упражнение: подсказка под клеткой, а не окно поверх — её читают краем глаза и чаще всего проходят мимо, и это нормально. */ .exnew{font-size:11.5px;color:var(--amber);line-height:1.3} .exnew a{color:var(--blue);text-decoration:underline} table.t tr.grouprow > td{background:var(--bg-header);border-top:2px solid var(--bd-strong); padding-top:10px;padding-bottom:7px;font-size:11.5px;font-weight:700; letter-spacing:.04em;text-transform:uppercase;color:var(--tx-muted)} table.t tr.grouprow.first > td{border-top:0} /* пояснение при заголовке — фраза, а не ярлык: обычным шрифтом */ table.t tr.grouprow > td .gnote{font-weight:400;text-transform:none;letter-spacing:0} table.t tr.grouprow.gm > td{border-top-color:var(--blue-bd);color:var(--blue)} table.t tr.grouprow.over > td{border-top-color:var(--amber-bd);color:var(--amber); background:var(--amber-bg)} /* Раскрытый старт: продолжение своей строки, а не вставка поверх таблицы. Отбивка слева показывает, что это её часть, а не следующая запись. */ table.t tr.rowopen > td{background:var(--bg-muted);padding:0} /* Ширину ей ставит скрипт по видимой части списка: в разметке этой величины нет — ячейка шириной во всю таблицу, а таблица шире экрана. */ /* Поля сроков поездки: одинаковой ширины, переносятся по одному. Ряд из полей разной ширины на узком списке рвал форму пополам. */ .racegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px 12px;align-items:flex-end;max-width:1020px} .rowbox{position:sticky;left:0;box-sizing:border-box; border-left:3px solid var(--blue);padding:12px 14px} table.t tr.wrn td{background:var(--amber-bg)} table.t td.ov{background:#FEF9EE;color:var(--amber);font-weight:600} table.t td.sticky,table.t th.sticky{position:sticky;left:0;background:#fff;border-right:1px solid var(--bd-strong);z-index:1} table.t thead th.sticky{background:var(--bg-header);z-index:3} table.t tbody tr:nth-child(even) td.sticky{background:var(--bg-row-alt)} table.t tbody tr:hover td.sticky{background:var(--bg-muted)} /* вторая закреплённая колонка: у динамики ЭКО рядом с названием показателя стоит модель — без неё числа в прокрученной таблице не с чем сравнить */ table.t td.sticky2,table.t th.sticky2{position:sticky;left:260px;background:#fff; border-right:1px solid var(--bd-strong);z-index:1} table.t thead th.sticky2{background:var(--bg-header);z-index:3} table.t tbody tr:nth-child(even) td.sticky2{background:var(--bg-row-alt)} table.t tbody tr:hover td.sticky2{background:var(--bg-muted)} table.t tbody tr.keyrow td.sticky,table.t tbody tr.keyrow td.sticky2{background:var(--amber-bg,#FFF6E5)} /* Несколько закреплённых колонок подряд: в конструкторе моделей слева стоят показатель, единица и пол — без них прокрученные вправо сезоны читаются вслепую. Ширины колонок зависят от названий, поэтому смещения расставляет скрипт: жёсткие пиксели врут, как только показатель длиннее обычного. */ .tw.stickcols table.t td.stickx,.tw.stickcols table.t th.stickx{ position:sticky;left:0;background:#fff;z-index:1} .tw.stickcols table.t .stickx[data-col="1"]{left:var(--sx1,280px)} .tw.stickcols table.t .stickx[data-col="2"]{left:var(--sx2,430px)} .tw.stickcols table.t .stickx.edge{border-right:1px solid var(--bd-strong)} .tw.stickcols table.t thead th.stickx{background:var(--bg-header);z-index:3} .tw.stickcols table.t tbody tr:nth-child(even) td.stickx{background:var(--bg-row-alt)} .tw.stickcols table.t tbody tr:hover td.stickx{background:var(--bg-muted)} .tw.stickcols table.t tbody tr.sumrow td.stickx{background:var(--bg-muted)} /* Панель отрезка и среза в ЦКП: слева подпись, справа выбор недель, ниже срезы. Сетка жёсткая, а кнопка «Весь сезон» стоит всегда (погашенная на полном сезоне) — иначе при выборе отрезка строка перестраивалась и всё уезжало вбок. */ .cpbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start} .cpbar-info{min-height:44px} .cpbar-form{display:flex;gap:8px;align-items:flex-end;justify-content:flex-end;flex-wrap:nowrap} .cpbar-scopes{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap} @media (max-width:1100px){.cpbar{grid-template-columns:1fr}.cpbar-form{justify-content:flex-start;flex-wrap:wrap}} /* итоговая строка обследования: интегральный показатель читают первым, поэтому он выделен полосой и жирным, а не теряется среди сорока строк */ table.t tbody tr.keyrow td{background:var(--amber-bg,#FFF6E5);font-weight:600} table.t tbody tr.keyrow:hover td{background:var(--amber-bg,#FFF6E5)} table.t tbody tr.keyrow td:first-child{box-shadow:inset 3px 0 0 var(--amber,#B26A00)} /* тот же смысл колонкой: в срезе команды интегральный показатель — итог всего обследования, и его ищут глазами первым, а строки там спортсмены */ table.t th.keycol,table.t td.keycol{background:var(--amber-bg,#FFF6E5)} table.t td.keycol{font-weight:600} table.t tbody tr:hover td.keycol{background:var(--amber-bg,#FFF6E5)} table.t thead th.keycol{box-shadow:inset 0 3px 0 var(--amber,#B26A00)} /* год над колонками дат обследований: держит взгляд в нужном столбце */ table.t thead th.yhead{background:var(--bg-header);font-size:11px;letter-spacing:.03em; color:var(--tx-muted);border-left:1px solid var(--bd-medium);text-align:center} /* шапка длинного списка не уезжает вверх при его прокрутке */ table.t thead.stick th{position:sticky;top:0;z-index:4;background:var(--bg-header)} /* название раздела в широкой таблице: сама строка тянется во всю ширину, а подпись держится у левого края — при прокрутке вправо видно, к какому разделу строки */ /* Длинная таблица показателей: шапка держится сверху, а строка раздела — сразу под ней, пока идут его показатели. Прокрутив к «Аэробным способностям», тренер видит, в каком разделе находится, а не гадает по названиям строк. Высоту шапки подставляет скрипт: у таблиц ЭКО она в две строки. */ .tw.stickgrp table.t thead th{position:sticky;top:0;z-index:5;background:var(--bg-header)} .tw.stickgrp table.t thead th.sticky,.tw.stickgrp table.t thead th.sticky2{z-index:6} .tw.stickgrp table.t tbody td.grpcell{position:sticky;top:var(--theadh,34px);z-index:4; background:var(--bg-muted)} .tw.stickgrp table.t tbody tr.grp td{position:sticky;top:var(--theadh,34px);z-index:4} /* Подпись раздела стоит там же, где названия показателей, и не сдвигается ни на пиксель при прокрутке: собственный отступ вместо отступа ячейки, иначе на нулевой прокрутке она смещена на ширину этого отступа, а потом «доезжает» к краю. */ table.t td.grpcell{padding-left:0} table.t .grpname{position:sticky;left:0;z-index:2;display:inline-block; padding:0 10px;background:var(--bg-muted)} table.t tr.grp .grpname{background:var(--bg-header)} table.t tr.grp td{background:var(--bg-header);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--tx-muted)} /* Название блока не уезжает при прокрутке вправо: строка блока растянута на всю таблицу, и прижимать её некуда — закрепляем текст внутри неё. Тогда подпись едет по своей строке и остаётся над колонкой показателей. */ .stickname{position:sticky;left:10px;display:inline-block;max-width:100%} .cellinp{width:100%;height:calc(var(--row-h) - 10px);border:1px solid transparent;border-radius:3px;background:transparent;padding:0 4px;font-size:inherit} .cellinp:hover{border-color:var(--bd-medium)} .cellinp:focus{outline:none;border-color:var(--blue);background:#fff} .cellinp.num{text-align:right;font-variant-numeric:tabular-nums} /* клетка, которая по умолчанию пуста: без рамки её не видно, и блок ввода читается как пустая таблица */ .cellinp.box{border-color:var(--bd-subtle);background:#fff} .cellinp.box:hover{border-color:var(--bd-medium)} .cellinp.box::placeholder{color:var(--tx-faint);font-size:11px} /* ячейка, которую документ не дал: обведена, чтобы её нашли и вписали руками */ /* клетка, значение которой уже лежит в базе: видно, что дата закрыта */ .cellinp.hasval{color:var(--green);font-weight:600} table.t td.isdb{background:var(--green-bg)} .cellinp.needval{border-color:var(--amber-bd);background:var(--amber-bg)} /* число не ушло в базу: поле остаётся заполненным, но видно, что оно не сохранено */ .cellinp.cellbad{border-color:var(--red);background:var(--red-bg,#FDECEC)} /* вспышка после сохранения работает и в клетке таблицы */ table.t td.saved{animation:amsSaved .9s ease-out} .cellinp.needval:focus{border-color:var(--blue);background:#fff} .cellsel{width:100%;height:calc(var(--row-h) - 10px);border:1px solid transparent;border-radius:3px;background:transparent;font-size:inherit;padding:0 2px} .cellsel:hover{border-color:var(--bd-medium)} .cellsel:focus{outline:none;border-color:var(--blue);background:#fff} .rowact{display:flex;align-items:center;gap:4px;justify-content:flex-end} .rowact span{width:22px;height:22px;border-radius:3px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx-muted);font-size:13px} .rowact span:hover{background:#F1F5F9;color:var(--blue)} .rowact span.del{color:var(--red)} .rowact span.del:hover{background:var(--red-bg)} .empty{padding:56px 24px;text-align:center} .empty .t{font-size:15px;font-weight:600;margin-bottom:6px} .empty .d{font-size:13px;color:var(--tx-muted);margin-bottom:16px} .histmark{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-top:6px solid var(--amber); position:absolute;top:0;right:0} .hascell{position:relative} /* ---------- шкалы ---------- */ .bar{height:8px;border-radius:4px;background:var(--bg-header);position:relative;overflow:hidden} .bar > i{position:absolute;left:0;top:0;bottom:0;background:var(--blue);border-radius:4px} .scale{position:relative;height:14px;background:var(--bg-header);border-radius:3px} .scale .cor{position:absolute;top:0;bottom:0;background:var(--green-corridor)} .scale .mk{position:absolute;top:-2px;width:2px;height:18px;background:var(--tx-primary)} .scale .m100{position:absolute;top:-2px;width:1px;height:18px;background:var(--tx-faint)} /* ---------- сетка недель ---------- */ .weeks{border-collapse:separate;border-spacing:0;font-size:11px} .weeks th,.weeks td{border-bottom:1px solid var(--bd-subtle);border-right:1px solid var(--bd-faint);padding:0 2px;height:26px;text-align:center;white-space:nowrap} .weeks td.head,.weeks th.head{position:sticky;left:0;background:#fff;z-index:2;text-align:left;padding:0 10px;width:var(--yhead,250px);min-width:var(--yhead,250px);border-right:1px solid var(--bd-strong);font-size:12px} .weeks tr.auto td{background:var(--bg-calc);color:var(--tx-faint)} .weeks tr.auto td.head{background:#fff} .wk{width:40px;min-width:40px} .resize{cursor:col-resize} /* ---------- тост ---------- */ #toast{position:fixed;right:24px;bottom:24px;z-index:80;background:var(--tx-primary);color:#fff;padding:12px 16px; border-radius:6px;font-size:13px;box-shadow:0 6px 20px rgba(16,24,40,.24);max-width:420px;display:none} #toast.on{display:block} /* ---------- модальное окно и правая панель ---------- */ .ovwrap{position:fixed;inset:0;background:rgba(31,45,61,.28);z-index:70;display:flex;justify-content:flex-end} .ovpanel{width:420px;background:#fff;height:100%;display:flex;flex-direction:column} .ovpanel .h{padding:16px 20px;border-bottom:1px solid var(--bd-strong)} .ovpanel .b{flex:1 1 auto;overflow:auto;padding:12px 20px} .modalwrap{position:fixed;inset:0;background:rgba(31,45,61,.28);z-index:70;display:flex;align-items:center;justify-content:center;padding:24px} .modal{width:720px;max-width:100%;max-height:86vh;background:#fff;border-radius:8px;display:flex;flex-direction:column;box-shadow:0 6px 20px rgba(16,24,40,.24)} .modal .h{padding:16px 20px;border-bottom:1px solid var(--bd-strong);display:flex;align-items:center;gap:10px} .modal .b{flex:1 1 auto;overflow:auto;padding:16px 20px} .modal .f{padding:12px 20px;border-top:1px solid var(--bd-strong);display:flex;gap:8px;align-items:center} /* ---------- вход ---------- */ .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-app);padding:24px} .login{width:400px;max-width:100%;background:#fff;border:1px solid var(--bd-strong);border-radius:8px;padding:28px} .login input{width:100%;height:38px;border:1px solid var(--bd-strong);border-radius:6px;padding:0 10px;font-size:13.5px} .login .go{height:42px;border-radius:6px;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;cursor:pointer;width:100%;border:none} .login .go:hover{background:var(--green-hover)} /* Демонстрационные записи: разложены по службам, в строке человек и его должность. Два десятка строк «почта — роль» подряд читаются плохо, и войти «за старшего тренера» получалось наугад. Окно входа под такой список шире. */ .login{width:400px} .login:has(.lgrow){width:560px} .lgdesk{font-size:11px;font-weight:600;color:var(--tx-muted);text-transform:uppercase; letter-spacing:.4px;margin:10px 0 4px} .lgdesk:first-of-type{margin-top:0} .lgrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:4px 6px; border-radius:4px;cursor:pointer;line-height:1.35} .lgrow:hover{background:var(--blue-bg)} .lgname{font-size:12.5px;font-weight:500} .lgduty{font-size:11px;color:var(--tx-muted);grid-column:1;grid-row:2} .lgmail{font-size:11.5px;color:var(--tx-muted);grid-column:2;grid-row:1/3;align-self:center} /* ---------- согласия ---------- */ .consent{border:1px solid var(--bd-medium);border-radius:6px;padding:12px 14px;margin-bottom:10px;background:#fff} .consent .row{display:flex;gap:10px;align-items:flex-start} .consent input[type=checkbox]{width:18px;height:18px;margin-top:1px;flex:0 0 auto} /* ---------- мобильная рамка ---------- */ .mobframe{width:390px;max-width:100%;border:1px solid var(--bd-strong);border-radius:22px;background:#fff;box-shadow:0 2px 10px rgba(16,24,40,.08);overflow:hidden} .mobstatus{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:11px;color:var(--tx-muted);border-bottom:1px solid var(--bd-subtle)} .mobbody{padding:14px 16px 20px} .tapzone{min-height:48px} /* ---------- степпер ---------- */ /* Полоса шагов мастера: восемь шагов должны укладываться в строку, поэтому и кружок, и подпись мельче обычных, а соединители — тонкие */ .stepper{display:flex;align-items:center;justify-content:flex-start;gap:0;margin-bottom:14px; flex-wrap:wrap;row-gap:6px} .stepper .step{display:flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none; padding:3px 6px;border-radius:6px} .stepper .step:hover{background:var(--bg-muted);text-decoration:none} .step:hover{text-decoration:none} .stepper .step .n{width:20px;height:20px;border-radius:10px;background:var(--bg-header);color:var(--tx-muted);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:0 0 auto} .stepper .step.on .n{background:var(--blue);color:#fff} .stepper .step.done .n{background:var(--green);color:#fff} .stepper .step .s{font-size:11.5px;color:var(--tx-muted);white-space:nowrap} .stepper .step.on .s{color:var(--tx-primary);font-weight:600} .stepline{height:1px;background:var(--bd-medium);flex:0 0 16px;width:16px;margin:0 2px} /* ---------- состояния: загрузка, ошибка ---------- */ .skel{background:linear-gradient(90deg,var(--bg-header) 25%,var(--bd-faint) 37%,var(--bg-header) 63%); background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:4px;height:12px} @keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}} .state{padding:40px 24px;text-align:center} .state .t{font-size:15px;font-weight:600;margin-bottom:6px} .state .d{font-size:13px;color:var(--tx-muted);margin-bottom:16px} /* ---------- служебное ---------- */ .flex{display:flex;align-items:center} .gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap14{gap:14px}.gap16{gap:16px}.gap24{gap:24px} .grow{flex:1 1 auto} .mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb20{margin-bottom:20px} /* подсказка к полю: значок у подписи и всплывающий текст под полем */ .field{position:relative} .hinti{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-left:5px; padding:0;border:1px solid var(--bd-strong);border-radius:50%;background:var(--bg-surface); color:var(--tx-muted);font-size:10px;font-style:italic;font-weight:600;line-height:1;cursor:pointer;vertical-align:middle} .hinti:hover{color:var(--blue);border-color:var(--blue)} .hinti[aria-expanded="true"]{color:#fff;background:var(--blue);border-color:var(--blue)} .hintbox{position:absolute;z-index:30;left:0;top:100%;margin-top:2px;width:340px;max-width:92vw; padding:9px 11px;border:1px solid var(--bd-strong);border-radius:6px;background:var(--bg-surface); box-shadow:0 8px 20px rgba(16,24,40,.16);font-size:12px;line-height:1.45;color:var(--tx-secondary)} /* полоса вкладок спортсменов: переносится по ширине карточки, а не уезжает за край */ /* отметка даты отчёта: видно, какие прохождения уйдут в базу и что уже загружено */ .datechip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--bd-medium); border-radius:14px;font-size:12.5px;background:var(--bg-surface);cursor:pointer} .datechip.on{border-color:var(--green);background:var(--green-bg)} .datechip input{margin:0} .ecotabs{display:flex;flex-wrap:wrap;gap:4px} .ecotabs a{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--bd-medium); border-radius:6px;background:var(--bg-surface);color:var(--tx-secondary);font-size:12.5px;text-decoration:none} .ecotabs a:hover{border-color:var(--blue);color:var(--blue)} .ecotabs a.on{background:var(--blue-bg);border-color:var(--blue-bd);color:var(--blue);font-weight:600} .ecotabs a.saved{border-color:var(--green);background:var(--green-bg)} .ecook{color:var(--green);font-weight:600} .mt4{margin-top:4px} .mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px} .wrap{flex-wrap:wrap} .right{text-align:right} .nowrap{white-space:nowrap} .ok{color:var(--green)}.warn{color:var(--amber)}.bad{color:var(--red)}.muted{color:var(--tx-muted)} .toolbar{background:#fff;border:1px solid var(--bd-strong);border-radius:8px 8px 0 0;border-bottom:none;padding:10px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .toolbar + .tw{border-radius:0} .foot{background:#fff;border:1px solid var(--bd-strong);border-top:none;border-radius:0 0 8px 8px;padding:14px} /* ---------- глобальный поиск (правки, п. 1) ---------- */ .gs-trigger{flex:1 1 180px;max-width:340px;min-width:100px;height:30px;border:1px solid var(--bd-strong); border-radius:4px;padding:0 10px;background:var(--bg-muted);display:flex;align-items:center;gap:8px; cursor:pointer;color:var(--tx-faint);font-size:13px} .gs-trigger:hover{border-color:var(--blue)} .kbd{flex:0 0 auto;font-size:10.5px;border:1px solid var(--bd-medium);border-radius:3px;padding:1px 5px;background:#fff;color:var(--tx-muted)} .gs-group{margin-bottom:14px} .gs-group .t{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-faint);margin-bottom:6px} .gs-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:4px;text-decoration:none;color:var(--tx-primary)} .gs-item:hover,.gs-item.sel{background:var(--blue-bg);text-decoration:none} .gs-item .n{font-size:13px;font-weight:500} .gs-item .s{font-size:11.5px;color:var(--tx-muted)} /* ---------- дневник ---------- */ table.diary{border-collapse:separate;border-spacing:0;font-size:12.5px} table.diary th,table.diary td{border-bottom:1px solid var(--bd-subtle);border-right:1px solid var(--bd-faint); padding:0 8px;height:28px;white-space:nowrap} table.diary th{background:var(--bg-header);position:sticky;top:0;z-index:2;font-size:10.5px;font-weight:600; color:var(--tx-muted);text-transform:uppercase;letter-spacing:.03em;text-align:center} table.diary td.metric,table.diary th.metric{position:sticky;left:0;z-index:3;background:#fff;text-align:left; min-width:280px;max-width:280px;border-right:1px solid var(--bd-strong);overflow:hidden;text-overflow:ellipsis} table.diary th.metric{z-index:4} table.diary td.unit,table.diary th.unit{position:sticky;left:280px;z-index:3;background:#fff;text-align:left; min-width:70px;color:var(--tx-muted);border-right:1px solid var(--bd-strong)} table.diary th.unit{z-index:4;background:var(--bg-header)} table.diary td.v{text-align:right;font-variant-numeric:tabular-nums} table.diary td.total,table.diary th.total{background:var(--bg-header);font-weight:600} table.diary tr.blk td{background:var(--bg-header);font-size:11px;font-weight:600;text-transform:uppercase; letter-spacing:.03em;color:var(--tx-muted);cursor:pointer;position:sticky;left:0} /* Свёрнутое — одним видом на всё приложение. * * Свёрнутых блоков на экране бывает три подряд: спрятанная форма, длинная * таблица и справка. Пока каждый оформлялся по-своему — карточкой в полный * рост, голым
без рамки, синей плашкой вдвое выше строки, — разнобой * читался как разная важность, хотя смысл один: «здесь свёрнуто, разверните». * Поэтому у всех одна высота строки, одна рамка и один значок. * * Собрано на
: разворот нативный, без скрипта — страница не * перерисовывается и не уезжает наверх. * * .fold — свёрнутая часть работы (форма, таблица, список). * .infobox — справка: то же самое, но голубым, потому что читать необязательно. */ details.fold,details.infobox{border:1px solid var(--bd-subtle);border-radius:6px;background:#fff; padding:0 12px;margin-bottom:12px} details.fold > summary,details.infobox > summary{cursor:pointer;list-style:none;display:flex; align-items:center;gap:8px;min-height:32px;padding:5px 0;font-size:13px;font-weight:600; color:var(--tx-primary);line-height:1.35} details.fold > summary::-webkit-details-marker, details.infobox > summary::-webkit-details-marker{display:none} details.fold > summary::before,details.infobox > summary::before{content:'▸';flex:0 0 auto; color:var(--tx-muted);font-size:11px} details.fold[open] > summary::before,details.infobox[open] > summary::before{content:'▾'} details.fold > summary:hover,details.infobox > summary:hover{color:var(--blue)} /* заголовок свёрнутого — строка, а не раздел: крупный шрифт тут спорит с соседями */ details.fold > summary.sec-title,details.infobox > summary.sec-title{font-size:13px} details.fold > summary .caption,details.fold > summary .faint, details.infobox > summary .caption,details.infobox > summary .faint{font-weight:400} details.fold[open],details.infobox[open]{padding-bottom:12px} details.fold[open] > summary,details.infobox[open] > summary{margin-bottom:10px; border-bottom:1px solid var(--bd-subtle)} /* справка читается как подсказка, а не как предупреждение */ details.infobox{border-color:var(--blue-bd);background:var(--blue-bg)} details.infobox > summary{color:var(--blue-hover)} details.infobox > summary::before{color:var(--blue)} details.infobox[open] > summary{border-bottom-color:var(--blue-bd)} .ibi{flex:0 0 auto;width:16px;height:16px;border-radius:8px;background:var(--blue);color:#fff; font-size:11px;font-weight:700;font-style:italic;display:flex;align-items:center;justify-content:center} details.infobox .ibhint{font-weight:400;color:var(--tx-muted);font-size:12px} /* Меню из трёх точек: действия, которых немного и которые не стоят кнопки в шапке. Стрелки у него нет — точки сами говорят «здесь ещё что-то» */ .dotsmenu{position:relative;display:inline-block} .dotsmenu>summary{list-style:none;cursor:pointer;width:32px;height:32px;display:inline-flex; align-items:center;justify-content:center;border:1px solid var(--bd-strong);border-radius:4px; background:#fff;color:var(--tx-secondary);font-size:16px;line-height:1} .dotsmenu>summary::-webkit-details-marker{display:none} .dotsmenu>summary:hover{border-color:var(--blue);color:var(--blue)} .dotsmenu[open]>summary{border-color:var(--blue);color:var(--blue)} /* в строке разговора кнопки соседствуют с названием: там нужен размер поменьше, иначе строка становится выше самой переписки */ .dotsmenu.sm>summary{width:26px;height:26px;font-size:14px} /* панель, выставленная скриптом по окну: её не режет прокрутка таблицы */ .dotsbox.fx{position:fixed;top:0;left:0;right:auto;margin:0;width:max-content; max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto} .dotsbox{position:absolute;z-index:40;top:36px;right:0;min-width:320px;max-height:60vh;overflow:auto; padding:6px;background:#fff;border:1px solid var(--bd-strong);border-radius:6px; box-shadow:0 8px 24px rgba(31,45,61,.14)} .dotsbox .cmphead{padding:6px 8px 2px} .dotsrow{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:none; background:none;border-radius:4px;font-size:13px;color:var(--tx-primary);text-align:left; cursor:pointer;text-decoration:none} .dotsrow:hover{background:var(--bg-muted);text-decoration:none;color:var(--tx-primary)} .dotsrow .faint{margin-left:auto} /* Сообщение: по нему нажимают, чтобы ответить, поэтому это ссылка, а не просто пузырь. Цвет и рамка прежние — щелчок не должен выглядеть как переход на другой экран */ .msgbox{display:block;background:var(--bg-muted);border:1px solid var(--bd-medium); border-radius:10px;padding:8px 12px;font-size:13px;line-height:1.45;color:inherit;text-decoration:none} .msgbox.mine{background:var(--blue-bg);border-color:var(--blue-bd)} .msgbox:hover{border-color:var(--blue);text-decoration:none;color:inherit} /* цитата: узкая полоса слева, как в переписке на бумаге — «вот на это отвечаю» */ .msgq{display:block;border-left:3px solid var(--blue);padding:2px 0 2px 8px;margin-bottom:6px; font-size:12px;color:var(--tx-secondary);background:transparent} /* Чат: слева разговоры, справа переписка. На телефоне рядом они не встают — список уезжает наверх и укорачивается, а переписка занимает всю ширину. Высоты в vh: на узком экране переписка должна помещаться в экран целиком, иначе поле ввода оказывается за нижним краем. */ .chatwrap{display:flex;gap:12px;align-items:flex-start} .chatlist{flex:0 0 300px;max-width:300px;overflow:hidden} .chatrows{max-height:62vh;overflow:auto} .chatmain{min-width:420px;display:flex;flex-direction:column;height:66vh;min-height:440px} .chathead{display:flex;gap:8px;align-items:center;padding:8px 14px; border-bottom:1px solid var(--bd-subtle)} .chatacts{flex:0 0 auto} @media (max-width:820px){ .chatwrap{flex-direction:column} .chatlist{flex:1 1 auto;max-width:none;width:100%} .chatrows{max-height:34vh} .chatmain{min-width:0;width:100%;height:auto;min-height:0;max-height:none} .chathead{flex-wrap:wrap;row-gap:6px} .chathead .grow{display:none} .chatacts{margin-left:auto} .dotsbox{min-width:0;width:max-content;max-width:calc(100vw - 32px)} } /* Строка списка разговоров: выбранный виден сразу — в чате переключаются часто, и «где я сейчас» должно читаться без чтения заголовка */ .chatrow{display:block;padding:9px 12px;border-bottom:1px solid var(--bd-subtle); color:inherit;text-decoration:none} .chatrow:hover{background:var(--bg-subtle);text-decoration:none;color:inherit} .chatrow.on{background:var(--blue-bg);box-shadow:inset 3px 0 0 var(--blue)} .chatrow .nav-badge{position:static} /* короткая подсветка после сохранения: подтверждение без всплывающего текста */ @keyframes amsSaved{from{background:var(--green-bg,#E7F3EA)}to{background:transparent}} .saved{animation:amsSaved .9s ease-out} /* плановые объёмы: расчётная ячейка отличается от введённой руками, а колонки переездов и выходных закрыты для ввода */ table.diary td span.calc{background:none;color:var(--tx-secondary);font-variant-numeric:tabular-nums} table.diary td.v.pv-off{background:var(--bg-muted)} /* итоговая строка блока: «— общее время», общий объём по зонам и по всей работе. Жирный здесь несёт смысл — это сумма, а не ещё один показатель наравне с прочими */ table.diary tr.sumrow td{font-weight:600} table.diary tr.sumrow td.metric{color:var(--tx-primary)} /* итог в шапке блока показывается только когда блок свёрнут */ table.diary tr.blk td.blksum{text-align:right;font-variant-numeric:tabular-nums; text-transform:none;letter-spacing:0;font-weight:600;display:none} table.diary tr.blk[data-open="0"] td.blksum{display:table-cell} .src-device{box-shadow:inset 0 -2px 0 var(--green)} .src-manual{box-shadow:inset 0 -2px 0 var(--amber)} .src-none{color:var(--tx-faint)} .zone-1{background:#EAF4FE;color:#1670C4} .zone-2{background:#E7F3EA;color:#1E7E34} .zone-3{background:#FDF0D9;color:#8A5A00} .zone-4{background:#FBEDEB;color:#C0392B} .zone-5{background:#EDE7F6;color:#5B3FA8} .zonebox{flex:1 1 0;border:1px solid var(--bd-medium);border-radius:4px;padding:6px 8px;text-align:center} /* выбор пульсовой зоны в конспекте: цвет тот же, что в отчётах и у спортсмена, поэтому зона узнаётся без чтения подписи */ .zonepick{display:flex;align-items:center;gap:6px} .zdot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;border:1px solid var(--bd-medium);background:transparent} .zdot.zone-1{background:#1670C4;border-color:#1670C4} .zdot.zone-2{background:#1E7E34;border-color:#1E7E34} .zdot.zone-3{background:#8A5A00;border-color:#8A5A00} .zdot.zone-4{background:#C0392B;border-color:#C0392B} .zdot.zone-5{background:#5B3FA8;border-color:#5B3FA8} .zonesel{min-width:96px;font-weight:500} .zonesel.zone-1,.zonesel.zone-2,.zonesel.zone-3,.zonesel.zone-4,.zonesel.zone-5{border-color:var(--bd-medium)} .zonelegend{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:6px} .zonelegend span{display:flex;align-items:center;gap:5px} /* ---------- раскрывающийся отчёт ---------- */ .rep-card{background:#fff;border:1px solid var(--bd-strong);border-radius:8px;overflow:hidden;margin-bottom:8px} .rep-head{display:flex;align-items:center;gap:12px;padding:11px 14px;cursor:pointer;text-decoration:none;color:inherit} .rep-head:hover{background:var(--bg-muted);text-decoration:none;color:inherit} .subrow td{background:var(--bg-subtle)} /* ---------- выбор варианта в опроснике ---------- */ /* прячем сам переключатель, но оставляем его в потоке: иначе он недоступен с клавиатуры */ .scaleopt { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .scaleopt + .btn { cursor: pointer; user-select: none; } .scaleopt:checked + .btn { background: var(--blue-bg); border-color: var(--blue); color: var(--blue); font-weight: 600; box-shadow: inset 0 0 0 1px var(--blue); } .scaleopt:focus-visible + .btn { outline: 2px solid var(--blue); outline-offset: 1px; } /* ---------- шапка годового плана ---------- Девять верхних строк — это и есть план: месяц, неделя, период, этап, задача, мероприятие. Раньше они были помечены как служебные и уходили в бледно-серое, потому что рассчитываются сами. Но «рассчитано» не значит «второстепенно»: цифры объёмов ниже читают уже после того, как поняли, какая это неделя. */ .weeks tr.yh td{height:30px;background:#fff;color:var(--tx-primary);font-size:12px} .weeks tr.yh td.head{font-weight:600;color:var(--tx-primary)} .weeks tr.yh td.head .faint{font-weight:400} .weeks tr.yh td.txt{text-align:left;padding:0 6px} .weeks tr.yh td.txt span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} .weeks tr.ymonth td{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em; color:var(--tx-secondary);border-right:1px solid var(--bd-strong)} .weeks tr.ynum td{font-weight:700;font-variant-numeric:tabular-nums;font-size:12px} /* Даты недели: начало и конец в одной колонке шириной 40 пикселей — двумя строками, иначе диапазон в неё просто не помещается. */ .weeks tr.ydates td.wk{padding:0;line-height:1.08} .weeks tr.ydates b{display:block;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums} .weeks tr.ydates i{display:block;font-size:10px;font-style:normal;color:var(--tx-muted); font-variant-numeric:tabular-nums} /* Текущая неделя сезона: она нужна взгляду раньше всех остальных */ .weeks tr.ynum td.now,.weeks tr.ydates td.now{background:var(--blue-bg);box-shadow:inset 0 0 0 1px var(--blue-bd)} .weeks tr.ynum td.now{color:var(--blue)} .weeks tr.yper td{font-weight:700;font-size:12px;border-right:1px solid var(--bd-strong)} .weeks tr.ystage td{font-weight:600;background:var(--bg-subtle);border-right:1px solid var(--bd-medium)} .weeks tr.ytask td.txt span{color:var(--tx-secondary)} .weeks tr.yev td.ev{color:#fff;border-right:1px solid #fff} .weeks tr.yev td.ev span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font-size:11px;font-weight:600;padding:0 6px;text-align:left} .weeks tr.yevd td{border-bottom:2px solid var(--bd-strong)} /* Равные недели: без фиксированной раскладки колонка растягивалась под самое длинное название периода, и год переставал делиться на 52 одинаковых доли. */ .weeks.fixed{table-layout:fixed} .weeks.fixed td{overflow:hidden} .weeks tr.ymonth td:not(.head) span,.weeks tr.yper td:not(.head) span, .weeks tr.ystage td:not(.head) span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .weeks td.vol span{display:block;overflow:hidden;font-size:11px} .weeks.fixed td{text-overflow:ellipsis} /* ---------- шапка годового плана держится на экране ---------- Сетка прокручивается внутри себя по обеим осям, а девять верхних строк и колонка названий закреплены. Иначе при уходе вниз к показателям цифра теряет свою неделю, а при уходе вправо — своё название: сопоставлять становится нечего. */ .ygrid{max-height:calc(100vh - 230px);min-height:360px} .weeks tr.yh td{position:sticky;z-index:3} .weeks tr.ymonth td{top:0} .weeks tr.ynum td{top:30px} .weeks tr.ydates td{top:60px} .weeks tr.yper td{top:90px} .weeks tr.ystage td{top:120px} .weeks tr.ytask td{top:150px} .weeks tr.yev td{top:180px} .weeks tr.yplace td{top:210px} .weeks tr.yevd td{top:240px} .weeks tr.yh td.head{left:0;z-index:6} /* Названия строк переносятся: обрезать «Средства циклической направленности — общее время» до многоточия значит превратить показатель в загадку. Закреплённую шапку это не касается — её строки держат ровно 30 пикселей, от которых отсчитывается прилипание. */ .weeks tr:not(.yh) td.head{white-space:normal;line-height:1.2;padding-top:3px;padding-bottom:3px} .weeks tr:not(.yh) td.head span{font-size:11px} /* Сводные строки: общий объём работы, общий объём циклических нагрузок и итоги блоков */ .weeks tr.tot td{background:var(--bg-header);font-weight:700} .weeks tr.tot td.head{background:var(--bg-header);color:var(--tx-primary)} .weeks tr.tot td.head span{font-weight:700;font-size:11.5px} .weeks tr.tot td.vol span{font-weight:700} /* ---------- сетка под ширину окна ---------- На узком экране колонка названий съедает половину видимых недель, а вместе с ними и смысл сетки: она нужна, чтобы видеть год, а не одну подпись. Поэтому подпись ужимается, а служебное «· авто» уходит первым — оно и так повторяется в каждой строке шапки. */ .ygrid{--yhead:250px} @media(max-width:1280px){ .ygrid{--yhead:200px} .weeks tr.yh td.head .faint{display:none} } @media(max-width:980px){ .ygrid{--yhead:150px} .weeks tr.yh td.head{font-size:11px} .weeks tr:not(.yh) td.head span{font-size:10.5px} } /* Длинное значение набирается мельче, а не обрезается: «14 40» вместо «14 400» — это не сокращение, а потерянный разряд. */ .weeks td.vol.s1 span{font-size:9.5px;letter-spacing:-.02em} .weeks td.vol.s2 span{font-size:9px;letter-spacing:-.03em} .weeks td.vol.s3 span{font-size:8px;letter-spacing:-.04em} /* Подпись строки сетки не переносится: «Месяц» и пометка «· авто» — одно целое, а разорванная надвое подпись в закреплённой шапке ещё и не помещается в свои тридцать пикселей. Длинным названиям показателей перенос по-прежнему разрешён. */ .weeks tr.yh td.head,#y-band td.head{white-space:nowrap} .weeks td.head .faint{white-space:nowrap} /* Значение из книги: план недельный, своей раскладки по дням у него нет, и путать его с посчитанным по мероприятию нельзя. */ .weeks td.vol.book span{border-bottom:1px dotted var(--tx-faint)} .bookmark{border-bottom:1px dotted var(--tx-faint)} /* Поэтапные задачи — не подпись, а формулировка на несколько недель вперёд: одной обрезанной строкой она не читается. Три строки мелким кеглем показывают задачу целиком там, где диапазон широкий, и её начало там, где он узкий. */ .weeks tr.ytask td{height:44px} .weeks tr.ytask td.txt{padding:3px 6px;vertical-align:top} .weeks tr.ytask td.txt span{white-space:normal;font-size:9px;line-height:1.2; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* строка задач выше прочих — прилипание нижних строк шапки сдвигается на её высоту */ .weeks tr.yev td{top:194px} .weeks tr.yplace td{top:224px} .weeks tr.yevd td{top:254px} /* Текущая неделя — полосой через всю сетку: номер и даты пометить мало, взгляд идёт вниз по показателям и теряет колонку среди пятидесяти двух. Полоса лежит поверх ячеек полупрозрачно, поэтому проходит и через объединённые ячейки периода, этапа и мероприятия. */ .wkwrap{position:relative;display:inline-block;min-width:100%} .nowcol{position:absolute;top:0;bottom:0;width:40px;z-index:4;pointer-events:none; background:rgba(29,140,240,.10);border-left:1px solid var(--blue-bd);border-right:1px solid var(--blue-bd)} /* Длинная таблица прокручивается внутри себя, иначе закреплённая шапка не срабатывает: sticky держится за ближайший прокручиваемый бок, а им оказывается страница целиком. */ .tw.tall{max-height:calc(100vh - 300px);min-height:320px} /* таблица по ширине страницы без своей прокрутки: одна прокрутка — страницы, шапка держится у её верха (список мероприятий) */ .tw.flow{overflow:visible} table.t.evlist{table-layout:fixed;width:100%} table.t.evlist td{vertical-align:top;overflow-wrap:anywhere;padding-top:7px;padding-bottom:7px} table.t.evlist .evhead{display:flex;flex-direction:column;align-items:flex-start;gap:5px} table.t.evlist .evname{min-width:0} /* правка — один карандаш: квадратная кнопка в той же группе */ table.t.evlist .tabs.evacts a.ico{width:28px;padding:0;justify-content:center} /* «Пересмотреть» — заметная, но не тревожная: янтарная, как метки «требует внимания» */ table.t.evlist .evreview{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px; border:1px solid var(--amber-bd, #E8C77A);border-radius:4px;background:var(--amber-bg);color:var(--amber); font-size:12px;font-weight:600;cursor:pointer;font-family:inherit} table.t.evlist .evreview svg{width:14px;height:14px} table.t.evlist .evreview:hover{filter:brightness(.96)} /* План загрузки объектов: то, что сейчас правится, — рамкой в плане и у карточки */ .opcur{outline:2px solid var(--blue);outline-offset:-2px;box-shadow:0 0 0 3px var(--blue-bg);z-index:2} table.t td > a.opcur{padding:2px 4px} .card.opedit{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)} /* пустая клетка дня в плане объектов: щелчок — новая запись в этот слот; «+» виден при наведении */ a.opadd{display:block;min-height:26px;text-align:center;color:var(--tx-faint);text-decoration:none;border-radius:4px;line-height:26px} a.opadd::after{content:'+';opacity:0;font-weight:600} a.opadd:hover{background:var(--bg-muted)} a.opadd:hover::after,a.opadd:focus::after{opacity:1} table.t.evlist td .btn.sm{height:24px;padding:0 9px;font-size:12px} /* Действия строки — одной полосой под названием (датой) в первой клетке, как у мероприятий: в широкой таблице к ним не листать вбок, и они на одном месте у каждой строки. Значок без подписи — квадратная кнопка .ico, удаление — .danger */ .tabs.evacts{display:flex;width:max-content;margin-top:6px;border-color:var(--bd-strong);background:var(--bg-surface); box-shadow:0 1px 2px rgba(16,24,40,.08)} table.t.evlist .evhead .tabs.evacts{display:inline-flex;margin-top:0} /* у клеток таблиц нет отступа сверху и снизу — полоса ложилась прямо на линию строки и сливалась с ней: клетке с полосой — воздух снизу и сверху */ table.t tbody td:has(> .tabs.evacts),table.t tbody td:has(> div > .tabs.evacts), table.t tbody td:has(.evhead){padding-top:7px;padding-bottom:9px} /* у строки нет ни одного действия (смотрит не тот, кто правит) — пустой рамки не рисуем */ .tabs.evacts:not(:has(a,button,label,span,form)){display:none} .tabs.evacts a,.tabs.evacts button{height:26px;padding:0 10px;font-size:12px;font-weight:400;gap:5px;color:var(--tx-secondary); background:var(--bg-surface);font-family:inherit;white-space:nowrap} .tabs.evacts svg{width:14px;height:14px;color:var(--blue);flex:0 0 auto} .tabs.evacts a.ico,.tabs.evacts button.ico{width:28px;padding:0;justify-content:center} .tabs.evacts a:hover,.tabs.evacts button:hover{background:var(--blue-bg);color:var(--blue)} .tabs.evacts .danger svg{color:var(--tx-muted)} .tabs.evacts .danger:hover{background:var(--red-bg);color:var(--red)} .tabs.evacts .danger:hover svg{color:var(--red)} .tabs.evacts .ok:hover{background:var(--green-bg);color:var(--green)} .tabs.evacts .ok:hover svg{color:var(--green)} .tabs.evacts .on{background:var(--blue-bg);color:var(--blue)} .tabs.evacts > span{display:flex;align-items:center;height:26px;padding:0 10px;font-size:12px;color:var(--tx-faint); border-right:1px solid var(--bd-strong)} .tabs.evacts > span:last-child{border-right:none} .tabs.evacts > label{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;margin:0;font-size:12px; color:var(--tx-secondary);border-right:1px solid var(--bd-strong);cursor:pointer;white-space:nowrap} .tabs.evacts > label:last-child{border-right:none} .tabs.evacts > label input{margin:0} .tabs.evacts > form{display:flex;margin:0} .tabs.evacts > form:not(:last-child) > button{border-right:1px solid var(--bd-strong)} /* строка таблицы, где под главной клеткой стоят действия: клетки — по верху */ table.t tr.racts > td,table.t tbody tr:has(.tabs.evacts) > td{vertical-align:top;padding-top:7px;padding-bottom:9px} /* календарь соревнований по ширине страницы: колонки долями, отметки на всю клетку */ /* сведения об операторе: строки в несколько строчек текста — с воздухом */ table.t.pubinfo tbody td{padding:8px 10px;height:auto;vertical-align:top} /* сверка: решение по строке — под её названием в закреплённой первой клетке */ .recdecide{margin-top:6px;font-weight:400} table.t.complist{table-layout:fixed;width:100%} table.t.complist td{vertical-align:top;overflow-wrap:anywhere;padding-top:7px;padding-bottom:9px} table.t.complist td select.inp{width:100% !important;max-width:100%} table.t.complist tr.rowopen > td{overflow-x:auto} /* кнопка-ссылка: действие, которое по смыслу ссылка, но требует POST — «Создать конспект» в строке задачи создаёт запись, а не открывает страницу */ .lnk{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--blue);cursor:pointer} .lnk:hover{color:var(--blue-hover);text-decoration:underline} .lnk.danger{color:var(--red)} /* Календарь сезона: месяц — блок, колонка — день. Цвет здесь несёт смысл, поэтому у каждого рода записи он свой и не повторяется: выезд синий, дом почти белый, переезд янтарный, контрольная зелёная, обследование фиолетовое. Старты идут своей лестницей — залитый целевой, обведённый контрольный, пунктирный проходной, — чтобы приоритет читался даже там, где соседняя строка занята. */ .cal{table-layout:fixed;width:100%;border-collapse:collapse;font-size:11px} .cal td{border:1px solid var(--bd-subtle);height:26px;padding:0 2px;text-align:center; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--bg-surface)} .cal td.h{text-align:left;padding-left:8px;background:var(--bg-header);color:var(--tx-muted); font-weight:500;border-right:2px solid var(--bd-strong)} .cal td.we{background:var(--bg-muted);color:var(--tx-muted)} .cal td.now{box-shadow:inset 0 0 0 2px var(--blue);font-weight:600} /* где команда */ .cal td.pl{background:var(--blue-bg);border-color:var(--blue-bd)} .cal td.pl a{color:var(--blue);font-weight:600} .cal td.pl.home{background:var(--bg-surface);border-color:var(--bd-medium); box-shadow:inset 0 -2px 0 var(--grey)} .cal td.pl.home a{color:var(--tx-secondary);font-weight:600} .cal td.tr{background:var(--amber-bg-tag);border-color:var(--amber-bd); color:var(--amber);font-weight:700} /* что за день: старт, контрольная, обследование */ .cal td.ev a{font-weight:600} .cal td.pA{background:var(--red-bg);border-color:var(--red-bd)} .cal td.pA a{color:var(--red)} .cal td.pB{background:var(--bg-surface);box-shadow:inset 0 0 0 2px var(--red-bd)} .cal td.pB a{color:var(--red)} .cal td.pC{background:var(--bg-surface);box-shadow:inset 0 0 0 1px var(--grey)} .cal td.pC a{color:var(--tx-muted)} /* дни старта заняты ещё чем-то: рамка видна на любой заливке приоритета */ .cal td.clash{box-shadow:inset 0 0 0 2px var(--red);position:relative} .cal td.kt{background:var(--green-bg);border-color:var(--green-corridor)} .cal td.kt a{color:var(--green)} .cal td.eco{background:var(--p-pre);border-color:#CFC7EA} .cal td.eco a{color:var(--ev-exam)} /* Отчёт спортсмена: «Повт. · Подх. · Вес / дист» — это одно целое, факт тренировки. Общая шапка и боковые линии показывают границы группы, чтобы колонки не читались как три независимых показателя рядом с планом */ .t th.grp-fact{text-align:center;background:var(--blue-bg);color:var(--blue); border-left:2px solid var(--blue-bd);border-right:2px solid var(--blue-bd)} .t th.sub-fact:first-of-type{border-left:2px solid var(--blue-bd)} .t th.sub-fact:last-of-type{border-right:2px solid var(--blue-bd)} .t td.fact-l{border-left:2px solid var(--blue-bd)} .t td.fact-r{border-right:2px solid var(--blue-bd)} /* Плитка-ссылка на панелях: число ведёт туда, где его можно разобрать. Плитка без прав остаётся обычной карточкой — приглашать на «нет доступа» незачем */ a.card.kpi-a{display:block;text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s} a.card.kpi-a:hover{border-color:var(--blue);box-shadow:0 1px 6px rgba(29,140,240,.14);text-decoration:none} a.card.kpi-a:hover .kpi-num{color:var(--blue)} a.card.kpi-a.on{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue-bd)} /* ===== Списки людей: команда, спортсмены, тренеры, специалисты ===== Один вид на все четыре вкладки: карточка с панелью поиска, строки с портретом, счётчики кружком, статус плашкой и действия иконками. Разное содержание в одинаковой форме читается быстрее, чем четыре разные таблицы. */ .pcard{background:var(--bg-surface);border:1px solid var(--bd-strong);border-radius:10px;overflow:hidden} .ptools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px} .ptools .inp{height:34px} .ptbl{width:100%;border-collapse:collapse} .ptbl th{font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--tx-muted); font-weight:600;text-align:left;padding:11px 14px;background:var(--bg-header); border-top:1px solid var(--bd-subtle);border-bottom:1px solid var(--bd-subtle);white-space:nowrap} .ptbl td{padding:11px 14px;border-bottom:1px solid var(--bd-subtle);vertical-align:middle;font-size:13px} .ptbl tr:last-child td{border-bottom:0} .ptbl tbody tr:hover td{background:var(--bg-muted)} .ptbl tr.off td{background:var(--bg-muted);color:var(--tx-muted)} .pperson{display:flex;gap:10px;align-items:center} .pav{width:34px;height:34px;border-radius:17px;background:var(--blue-bg);color:var(--blue); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto} .pav.grey{background:var(--bg-header);color:var(--tx-muted)} .pnm{font-weight:500} .psub{font-size:11.5px;color:var(--tx-faint)} .pbadge{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--grey);color:#fff; font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center} .pbadge.red{background:var(--red)} .pbadge.blue{background:var(--blue)} .pbadge.green{background:var(--green)} .ppill{display:inline-block;padding:4px 9px;border-radius:6px;font-size:11.5px;font-weight:500;white-space:nowrap; background:var(--blue-bg);color:var(--blue)} .ppill.ok{background:var(--green-bg);color:var(--green)} .ppill.warn{background:var(--amber-bg-tag);color:var(--amber)} .ppill.bad{background:var(--red-bg);color:var(--red)} .ppill.mute{background:var(--bg-header);color:var(--tx-muted)} .pacts{display:flex;gap:6px;justify-content:flex-end;align-items:center} /* строка, чья карточка раскрыта ниже: иначе в длинной таблице теряешь, что именно открыл */ .t tbody tr.on{background:var(--blue-bg)} .iconbtn{width:30px;height:30px;border-radius:6px;border:1px solid var(--bd-medium);background:var(--bg-surface); color:var(--tx-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .iconbtn:hover{border-color:var(--blue);color:var(--blue);text-decoration:none} .iconbtn.danger:hover{border-color:var(--red);color:var(--red)} .iconbtn.ok:hover{border-color:var(--green);color:var(--green)} /* открытая форма повтора: видно, какая строка сейчас в работе — форма стоит под таблицей, и связь с ней иначе теряется */ .iconbtn.on{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)} .pfoot{padding:12px 14px;color:var(--tx-muted);font-size:12px;display:flex;gap:12px;align-items:center;flex-wrap:wrap} /* ===== Структура вида спорта ===== Карточка уровня: сверху вид спорта с общими должностями, ниже дисциплины. Пустая должность показывается так же заметно, как занятая: вакансия — это управленческий вопрос, а не пропуск в таблице. */ .orgtop{display:flex;justify-content:center;margin-bottom:0} .orgline{width:2px;height:22px;background:var(--bd-strong);margin:0 auto} .orggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .orgcard{background:var(--bg-surface);border:1px solid var(--bd-strong);border-radius:10px;overflow:hidden;position:relative} .orgcard.head{max-width:520px;width:100%;border-color:var(--blue-bd);box-shadow:0 1px 6px rgba(29,140,240,.10)} .orgtitle{padding:12px 14px;background:var(--bg-header);border-bottom:1px solid var(--bd-subtle); font-weight:600;font-size:14px;text-align:center} .orgcard.head .orgtitle{background:var(--blue-bg);color:var(--blue);font-size:15px} .orgnote{font-weight:400;font-size:11.5px;color:var(--tx-muted);margin-top:3px} .orgbody{padding:6px 14px} .orgrow{display:flex;gap:10px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--bd-subtle);font-size:12.5px} .orgrow:last-child{border-bottom:0} .orglabel{color:var(--tx-muted);flex:0 0 42%;font-size:11.5px} .sperson{display:flex;gap:7px;align-items:center;min-width:0} .sperson span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sperson.vac{color:var(--amber);font-weight:600} .pav.sm{width:22px;height:22px;border-radius:11px;font-size:10px} .orgfoot{padding:10px 14px;border-top:1px solid var(--bd-subtle);background:var(--bg-muted);font-size:12px} .orgacts{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .12s} .orgcard:hover .orgacts{opacity:1} /* Широкие списки людей прокручиваются внутри карточки, а не обрезаются её краем: после добавления выбора состава и трёх действий строка перестала помещаться */ .ptw{overflow-x:auto;max-width:100%} /* внутри обёртки таблица живёт своей шириной: колонки не сжимаются до переноса по букве, а строка целиком уезжает под прокрутку */ .ptw > table{width:100%} /* Лента дней: дни идут колонками, показатели строками. Первый столбец с названиями строк остаётся на месте, пока ленту листают вбок, — иначе, долистав до пятницы, уже не помнишь, что в строке ветер, а что осадки. */ .wxband{min-width:760px} .wxband td:first-child,.wxband th:first-child{ position:sticky;left:0;z-index:1;background:var(--bg-card,#fff)} .wxband th a.on{font-weight:700;color:var(--blue)} .wxband svg{display:block;margin:0 auto} .ptbl.wide{min-width:1120px} .ptbl td .inp{max-width:100%} .ptbl.wide td,.ptbl.wide th{padding:11px 10px} /* Строка бланка с вписанной фамилией: человека такого в составе нет, и это видно сразу — иначе легко принять её за обычную строку и ждать, что числа уйдут в базу. */ select.biowho.typed{border-color:var(--amber);color:var(--amber);font-weight:600} /* Один человек в двух строках бланка: числа одной затрут числа другой, поэтому видно сразу — до того, как обе строки заполнят. */ select.biowho.dup{border-color:var(--red);color:var(--red);font-weight:600} /* Лактатная кривая: наведение выделяет одну линию из пучка */ .lacline{transition:stroke-width .12s} .lacline:hover{stroke-width:3.5} .lacdot{transition:r .12s} .lacwrap:hover .lacline:not(:hover){opacity:.35} .lacser[hidden]{display:none} .laclg{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 6px;border:1px solid var(--bd-medium); border-radius:11px;background:#fff;font:inherit;font-size:11.5px;color:var(--tx-secondary);cursor:pointer} .laclg:hover{border-color:var(--bd-strong);background:var(--bg-muted)} .laclg[aria-pressed="false"]{color:var(--tx-faint);text-decoration:line-through;background:var(--bg-muted)} .laclg[aria-pressed="false"] .laclgdot{opacity:.3} .laclgdot{width:10px;height:10px;border-radius:2px;flex:0 0 auto} .laclgall{height:22px;padding:0 8px;border:0;border-radius:11px;background:none;font:inherit;font-size:11.5px; color:var(--blue);cursor:pointer;text-decoration:underline} /* Расчёты под значением: раньше они были набраны бледно-серым 10,5 px и терялись на белом. Теперь размер как у подписей, начертание среднее, а цвета — из палитры состояний: изменение по ступеням нейтральное, разница с наложением зелёная (лактата меньше) или красная (больше). */ .lacdelta{display:flex;gap:5px;justify-content:flex-end;align-items:baseline; font-size:11.5px;font-weight:500;line-height:1.35;white-space:nowrap;margin-top:1px} .lacdelta .dstep{color:var(--tx-secondary)} .lacdelta .dbetter{color:var(--green)} .lacdelta .dworse{color:var(--red)} .lacdelta .dsep{color:var(--bd-strong)} /* «Наложить» — выпадающий список прошедших тестирований. Отметок может быть несколько, поэтому это не