/* ========================================================================= YOTO SC CONTROL NEXT — таблица стилей ------------------------------------------------------------------------- Порядок в файле имеет значение: сначала токены, затем НАСЛЕДИЕ (правила, перенесённые из версий 0.3.0-0.14.1 дословно), затем новая система, которая их перекрывает, и в самом конце — экран СЦ, который не должен зависеть ни от чего выше. Наследие удаляется по мере переписывания страниц. ========================================================================= */ /* --- Токены: светлая тема ------------------------------------------------ */ :root{ /* поверхности */ --bg:#F1F2F3; --surface:#FFFFFF; --surface-2:#F7F8F9; --line:#E3E6E8; --line-strong:#CDD2D6; --track:#EAEDEF; /* текст */ --ink:#0E1317; --ink-2:#5B6670; --ink-3:#67737C; /* навигация */ --nav:#0E1317; --nav-hover:#171E23; --nav-active:#1E262C; --nav-line:#1B2329; --nav-ink:#DCE2E6; --nav-ink-2:#7C8792; /* акцент и ссылки */ --accent:#B7F102; --accent-ink:#0E1317; --accent-soft:rgba(183,241,2,.16); --link:#5E7F00; --link-h:#425A00; /* семантика */ --ok:#10714A; --ok-bg:#DFF1E8; --danger:#B62525; --danger-bg:#FBE7E7; --s-blue-fg:#1F5FBF; --s-blue-bg:#E7EEFB; --s-amber-fg:#8F5100; --s-amber-bg:#FBEEDA; --s-violet-fg:#5B3DBB; --s-violet-bg:#ECE7FB; --s-lime-fg:#4E6B00; --s-lime-bg:#EEF7CF; /* серии диаграмм: порядок проверен на различимость при дальтонизме (скрипт dataviz) */ --chart-1:#5E7F00; --chart-2:#1F5FBF; --chart-3:#8F5100; --chart-4:#5B3DBB; --chart-5:#10714A; /* геометрия и шрифты */ --radius:10px; --radius-lg:12px; --nav-w:236px; --nav-w-collapsed:68px; --row-h:42px; --topbar-h:60px; --sans:Onest,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --num:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Совместимость: имена из старой палитры. Наследие читает их, поэтому они обязаны жить, пока последняя страница не переписана. Значения не свои — это ссылки на новые токены, чтобы тема работала и в старых правилах. */ --panel:var(--surface); --text:var(--ink); --muted:var(--ink-3); --accent-dark:var(--link); --success:var(--ok); --sidebar:var(--nav); --sidebar-hover:var(--nav-hover); --sidebar-active:var(--nav-active); --shadow:none; --sidebar-width:var(--nav-w); --sidebar-collapsed-width:var(--nav-w-collapsed); --sidebar-motion:460ms; --sidebar-ease:cubic-bezier(.16,1,.30,1); } /* --- Токены: тёмная тема ------------------------------------------------- Список повторён дважды намеренно: явный выбор пользователя и системная настройка — разные условия, а объединить их в один селектор нельзя. Псевдонимы совместимости пересчитывать не нужно: var() разрешается в месте использования, поэтому они следуют за новыми токенами сами. */ :root[data-theme="dark"]{ --bg:#0B0F12; --surface:#13191D; --surface-2:#181F24; --line:#232B31; --line-strong:#333D45; --track:#232B31; --ink:#F2F5F7; --ink-2:#9AA5AE; --ink-3:#8B959D; --nav:#090D10; --nav-hover:#141B20; --nav-active:#1B2329; --nav-line:#1B2329; --link:#A9DE3A; --link-h:#C4EF5E; --ok:#4FCB92; --ok-bg:rgba(79,203,146,.14); --danger:#FF7B7B; --danger-bg:rgba(255,123,123,.11); --s-blue-fg:#6FA8FF; --s-blue-bg:rgba(111,168,255,.14); --s-amber-fg:#E9A63C; --s-amber-bg:rgba(233,166,60,.14); --s-violet-fg:#AE96FF; --s-violet-bg:rgba(174,150,255,.14); --s-lime-fg:#C4EF5E; --s-lime-bg:rgba(196,239,94,.14); --chart-1:#76A01A; --chart-2:#4F8FE8; --chart-3:#B97F25; --chart-4:#8F78E8; --chart-5:#2FA874; color-scheme:dark; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0B0F12; --surface:#13191D; --surface-2:#181F24; --line:#232B31; --line-strong:#333D45; --track:#232B31; --ink:#F2F5F7; --ink-2:#9AA5AE; --ink-3:#8B959D; --nav:#090D10; --nav-hover:#141B20; --nav-active:#1B2329; --nav-line:#1B2329; --link:#A9DE3A; --link-h:#C4EF5E; --ok:#4FCB92; --ok-bg:rgba(79,203,146,.14); --danger:#FF7B7B; --danger-bg:rgba(255,123,123,.11); --s-blue-fg:#6FA8FF; --s-blue-bg:rgba(111,168,255,.14); --s-amber-fg:#E9A63C; --s-amber-bg:rgba(233,166,60,.14); --s-violet-fg:#AE96FF; --s-violet-bg:rgba(174,150,255,.14); --s-lime-fg:#C4EF5E; --s-lime-bg:rgba(196,239,94,.14); --chart-1:#76A01A; --chart-2:#4F8FE8; --chart-3:#B97F25; --chart-4:#8F78E8; --chart-5:#2FA874; color-scheme:dark; } } /* ========================================================================= НАСЛЕДИЕ — правила версий 0.3.0-0.14.1, перенесённые дословно. Удаляются партиями по мере переписывания страниц. Ниже по файлу их перекрывает новая система, поэтому править здесь ничего не нужно. ========================================================================= */ *{box-sizing:border-box}button,input,textarea{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:250px 1fr}.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.brand{font-weight:900;font-size:21px;letter-spacing:-.5px;color:var(--accent);margin:4px 8px 28px}.brand span{font-weight:600;font-size:12px;color:#fff;display:block;letter-spacing:.8px;margin-top:2px}.sidebar nav{display:grid}.nav-item{display:flex;align-items:center;text-decoration:none}.nav-item.active{box-shadow:inset 3px 0 0 var(--accent)}.main{min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20}.topbar h1{font-size:16px;margin:0}.topbar p{font-size:12px;color:var(--muted);margin:3px 0 0}.clock{font-variant-numeric:tabular-nums}.stats-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.stat{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:17px 18px}.stat span{display:block;color:var(--muted);font-size:13px}.stat strong{display:block;font-size:30px;margin-top:8px}.quick-actions{grid-template-columns:repeat(3,1fr)}.action-tile{text-decoration:none;font-size:24px}input,textarea{width:100%}.login-card form{display:grid;gap:14px}.login-card .brand{margin:0 0 26px;color:#101418}.login-card .brand span{color:#65717b}.login-card h1{margin:0 0 20px}.product-card:hover,.repair-class:hover,.mechanic-card:hover,.product-card.selected,.repair-class.selected,.mechanic-card.selected{box-shadow:0 0 0 3px rgba(184,242,12,.13)}.repair-card.active-work{border:2px solid var(--accent-dark)}.card-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.repair-card h3{font-size:26px;margin:14px 0 3px}.repair-card h3 small{font-size:12px}.timer-wrap{border-radius:13px;padding:13px 15px;margin:12px 0}.timer-wrap span{font-size:11px;color:#9ca6ae;display:block}.timer-wrap strong{display:block;font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:1px;margin-top:2px}.repair-details{display:grid;grid-template-columns:1fr 1fr;gap:12px}.repair-details h4{margin:4px 0 5px;font-size:12px;text-transform:uppercase;color:var(--muted)}.repair-details ul{margin:0;padding-left:18px;font-size:13px}.card-actions{display:flex;gap:8px;margin-top:15px}.live-badge,.readonly-badge{display:inline-flex;align-items:center;gap:7px}table{min-width:760px}.mechanic-overview-card h3{margin:0 0 13px}.mechanic-overview-card>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mechanic-overview-card span{background:var(--surface-2);border-radius:10px;padding:9px;color:var(--muted);font-size:11px}.mechanic-overview-card b{display:block;font-size:19px;color:var(--text);margin-top:3px} @media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.sidebar nav{display:flex;overflow:auto}.nav-item{white-space:nowrap}.topbar{position:relative}.stats-grid{grid-template-columns:repeat(2,1fr)}.repair-details{grid-template-columns:1fr}} select{width:100%;font:inherit} .btn.secondary{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.topbar-right{display:flex;align-items:center}.muted-title{font-size:14px}.table-link{text-decoration:none}.table-link:hover{text-decoration:underline}.count-badge{display:inline-flex} .tabs{margin:0 0 18px}.tabs a{text-decoration:none}.filter-bar{margin:0 0 15px}.filter-bar input{max-width:430px}.filter-bar select{max-width:230px}.inline-simple label{flex:1}.detail-list{padding:10px 20px 18px}.detail-list>div{justify-content:space-between;border-bottom:1px solid var(--line)}.detail-list>div:last-child{border-bottom:0}.detail-list a{color:inherit}.card-list{padding:14px 18px;gap:9px}.card-list>div{display:flex;justify-content:space-between;gap:12px;background:var(--surface-2);border-radius:10px;padding:10px 12px}.card-list span{font-size:12px;color:var(--muted)}.timeline{gap:0}.timeline-item{grid-template-columns:14px 1fr}.timeline-item:before{content:"";position:absolute;left:5px;top:12px;bottom:-2px;width:2px;background:var(--line)}.timeline-item:last-child:before{display:none}.timeline-item i{width:12px;height:12px;border-radius:50%;background:var(--accent-dark);margin-top:3px;position:relative;z-index:1}.timeline-item div{display:grid;gap:3px} .scooter-select-row{display:flex;gap:10px;align-items:flex-start}.scooter-select-row .search-box{flex:1}.selected-scooter{justify-content:space-between;min-width:min(100%,680px)}.selected-scooter>div{display:grid;gap:2px}.selected-scooter span{font-size:12px;color:var(--s-lime-fg)}.selected-scooter a{color:var(--link);text-decoration:none;font-weight:800;font-size:12px}.quick-create{margin-top:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;padding:14px;max-width:850px}.quick-create-actions{display:flex;align-items:center;gap:12px;margin-top:12px}.quick-create-actions span{font-size:12px;color:var(--danger)} .password-reset{display:flex;gap:6px;align-items:center}.password-reset input{width:150px;padding:8px 9px}.users-create{grid-template-columns:1.5fr 1fr 1fr 1fr auto}.kpi-create{grid-template-columns:1fr 1.6fr 1.1fr .8fr .8fr auto}.row-edit{display:grid;grid-template-columns:minmax(180px,2fr) 90px 110px auto auto;gap:7px;align-items:center}.row-edit input,.row-edit select{padding:8px 9px}.kpi-row{grid-template-columns:minmax(220px,2fr) 150px 100px 100px auto}.timer-target{margin-top:5px!important;color:#9ca6ae!important}.timer-wrap.overrun{background:#3d1717}.timer-wrap.overrun strong{color:#ff9a9a}.timer-wrap.overrun .timer-target{color:#ffc0c0!important} @media(max-width:1100px){.users-create,.kpi-create{grid-template-columns:1fr 1fr}.receipt-row .remove-receipt-row{grid-column:1/-1}.row-edit,.kpi-row{grid-template-columns:1fr 1fr}.scooter-select-row{flex-direction:column}.scooter-select-row .search-box{width:100%}} @media(max-width:700px){.filter-bar{flex-direction:column}.filter-bar input,.filter-bar select{max-width:none}.inline-simple{flex-direction:column}.receipt-actions{flex-direction:column}.users-create,.kpi-create{grid-template-columns:1fr}.row-edit,.kpi-row{grid-template-columns:1fr}.password-reset{flex-direction:column;align-items:stretch}.password-reset input{width:100%}.selected-scooter{flex-direction:column}.page-head{flex-direction:column}} /* V0.3.0: QR identifier + stable live mechanic timer */ .scooter-create-form{grid-template-columns:1fr 1fr 1.5fr 1fr auto}.scooter-meta{font-size:12px;color:var(--muted);margin:-1px 0 10px;min-height:16px}.repair-timer{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;font-variant-numeric:tabular-nums lining-nums;font-feature-settings:'tnum' 1,'lnum' 1;min-width:9ch;white-space:nowrap;text-rendering:geometricPrecision}@media(max-width:900px){.scooter-create-form{grid-template-columns:1fr 1fr}.scooter-create-form .btn{grid-column:1/-1}} /* V0.3.0: mechanic part-request workflow */ .waiting-part-card{border-color:var(--s-blue-fg);box-shadow:0 0 0 3px var(--s-blue-bg),var(--shadow)}.part-request-state{border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin:10px 0;display:grid;gap:3px;background:var(--surface-2)}.part-request-state span{font-size:11px;font-weight:800;text-transform:uppercase;color:var(--muted)}.part-request-state strong{font-size:13px}.part-request-state.pending{background:var(--s-amber-bg);border-color:var(--s-amber-fg)}.part-request-state.approved{background:var(--ok-bg);border-color:var(--ok)}.part-request-state.rejected{background:var(--danger-bg);border-color:var(--danger)}.row-badges{display:flex;gap:8px;flex-wrap:wrap}.count-badge{display:inline-flex}.request-board,.control-board{padding:16px}.requested-part{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:11px 12px;display:grid;gap:3px;margin:10px 0}.requested-part span{font-size:11px;color:var(--muted)}.requested-part strong{font-size:15px}.request-reason{background:var(--s-amber-bg);border-radius:9px;padding:9px 10px;font-size:13px}.muted-line{font-size:12px;color:var(--muted)} .modal-backdrop{position:fixed;inset:0;background:rgba(8,12,16,.62);z-index:1000;display:grid;place-items:center;padding:18px}.modal-card{width:min(760px,100%);max-height:min(820px,92vh);overflow:auto;box-shadow:0 25px 80px rgba(0,0,0,.35);padding:20px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:14px}.modal-head h3{margin:0 0 4px;font-size:22px}.modal-head p{margin:0;color:var(--muted);font-size:13px}.modal-close{border:0;background:var(--surface-2);border-radius:9px;width:36px;height:36px;font-size:24px;cursor:pointer}.part-search{margin-bottom:12px}.part-request-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:360px;overflow:auto;margin-bottom:14px}.part-choice{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;padding:11px;text-align:left;display:grid;gap:3px;cursor:pointer}.part-choice:hover,.part-choice.selected{border-color:var(--accent-dark);box-shadow:0 0 0 3px rgba(184,242,12,.13)}.part-choice.selected{background:var(--s-lime-bg)}.part-choice span,.part-choice small{font-size:11px;color:var(--muted)}.part-request-form{margin-top:8px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.part-stats{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:720px){.part-request-list{grid-template-columns:1fr}.modal-card{padding:15px}.part-stats{grid-template-columns:1fr 1fr}} /* V0.4.0 — management dashboard */ .manager-dashboard-head .live-badge{gap:6px}.manager-dashboard-head .live-badge small{font-weight:700;text-transform:none;opacity:.65}.manager-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.manager-kpi{border:1px solid var(--line);text-decoration:none;box-shadow:var(--shadow)}.manager-kpi:hover{transform:translateY(-1px)}.manager-kpi span{font-size:12px;font-weight:800;color:var(--muted)}.manager-kpi strong{font-size:32px;line-height:1}.manager-kpi small{font-size:11px;color:var(--muted)}.manager-kpi.warning{background:var(--s-amber-bg)}.manager-kpi.danger{background:var(--danger-bg)}.manager-kpi.success{background:var(--ok-bg)}.pipeline-panel{margin-bottom:14px}.pipeline-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.pipeline-strip a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 13px;background:var(--surface-2);border-radius:11px;text-decoration:none;color:inherit}.pipeline-strip span{font-size:12px;color:var(--muted);font-weight:700}.pipeline-strip b{font-size:20px}.analytics-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-bottom:14px}.analytics-values{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.analytics-values>div{padding:12px;background:var(--surface-2);border-radius:11px}.analytics-values span{display:block;font-size:11px;color:var(--muted);min-height:28px}.analytics-values strong{display:block;font-size:20px;margin-top:5px}.mini-bars{justify-content:space-between}.mini-bar-item{grid-template-rows:18px 1fr 18px;text-align:center;min-width:0}.mini-bar-track{position:relative}.mini-bar-track i{position:absolute;left:0;right:0;bottom:0;transition:height .3s ease}.mini-bar-item span{font-size:10px;color:var(--muted)}.dashboard-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.manager-main-grid{grid-template-columns:1.25fr .75fr}.attention-list,.low-stock-list{gap:7px}.attention-row,.stock-short-row{grid-template-columns:1fr auto;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:var(--surface)}.attention-row>div:first-child,.stock-short-row>div:first-child{display:grid;gap:3px}.attention-reason{max-width:250px}.attention-row.severity-4{border-left:4px solid var(--danger)}.attention-row.severity-3{border-left:4px solid var(--s-amber-fg)}.attention-row.severity-2{border-left:4px solid var(--ink-3)}.dashboard-rule-note{font-size:10px;color:var(--muted);margin-top:10px}.warehouse-summary{grid-template-columns:repeat(3,1fr);margin-bottom:10px}.warehouse-summary>div{background:var(--surface-2);border-radius:10px}.warehouse-summary span{display:block;min-height:24px}.stock-short-row>div:last-child{display:grid;gap:2px}.stock-short-row>div:last-child strong{font-size:18px}.stock-short-row.empty-stock{background:var(--danger-bg)}.manager-mechanic-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.manager-mechanic-card{border:1px solid var(--line)}.mechanic-name{justify-content:space-between}.mechanic-name span{font-size:10px;color:var(--muted)}.working-dot{font-weight:800;color:var(--s-lime-fg)!important}.mechanic-load-bar{margin:11px 0}.mechanic-load-bar i{transition:width .3s ease}.mechanic-numbers{grid-template-columns:repeat(5,1fr)}.mechanic-numbers span{text-align:center}.mechanic-numbers b{display:block;margin-top:2px}.class-performance{grid-template-columns:repeat(3,1fr);gap:9px}.class-performance-card{grid-template-columns:1.2fr repeat(3,1fr);border:1px solid var(--line);border-radius:12px}.class-performance-card.low{border-left:4px solid var(--ok)}.class-performance-card.medium{border-left:4px solid var(--s-amber-fg)}.class-performance-card.hard{border-left:4px solid var(--danger)}.st-workspace-stats{grid-template-columns:repeat(6,1fr)}.attention-shortcuts{grid-template-columns:repeat(3,1fr);gap:8px}.attention-shortcut{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;text-decoration:none}.attention-shortcut span,.attention-shortcut small{display:block;font-size:10px;color:var(--muted)}.attention-shortcut strong{display:block;font-size:28px;margin:4px 0} @media(max-width:1250px){.manager-kpi-grid{grid-template-columns:repeat(3,1fr)}.analytics-values{grid-template-columns:repeat(3,1fr)}.class-performance-card{grid-template-columns:1fr 1fr}.st-workspace-stats{grid-template-columns:repeat(3,1fr)}} @media(max-width:900px){.analytics-grid,.dashboard-two-col,.manager-main-grid{grid-template-columns:1fr}.manager-mechanic-grid{grid-template-columns:1fr}.pipeline-strip{grid-template-columns:repeat(3,1fr)}.class-performance{grid-template-columns:1fr}.analytics-values{grid-template-columns:repeat(2,1fr)}.attention-shortcuts{grid-template-columns:1fr 1fr 1fr}} @media(max-width:650px){.manager-kpi-grid{grid-template-columns:1fr 1fr}.pipeline-strip{grid-template-columns:1fr 1fr}.analytics-values{grid-template-columns:1fr 1fr}.warehouse-summary{grid-template-columns:1fr 1fr 1fr}.mechanic-numbers{grid-template-columns:repeat(3,1fr)}.class-performance-card{grid-template-columns:1fr 1fr}.attention-row,.stock-short-row{grid-template-columns:1fr}.st-workspace-stats{grid-template-columns:1fr 1fr}.attention-shortcuts{grid-template-columns:1fr}.manager-dashboard-head{align-items:flex-start}} /* V0.5.0 — nomenclature, costs, editable references */ .repair-class.class-low,.repair-class[data-class="low"]{border-left:5px solid var(--ok);background:var(--ok-bg)}.repair-class.class-medium,.repair-class[data-class="medium"]{border-left:5px solid var(--s-amber-fg);background:var(--s-amber-bg)}.repair-class.class-hard,.repair-class[data-class="hard"]{border-left:5px solid var(--danger);background:var(--danger-bg)}.repair-class.class-low.selected{box-shadow:0 0 0 3px rgba(46,155,85,.14)}.repair-class.class-medium.selected{box-shadow:0 0 0 3px rgba(217,165,20,.16)}.repair-class.class-hard.selected{box-shadow:0 0 0 3px rgba(209,74,74,.14)} .status-dot{flex:0 0 10px;box-shadow:0 0 0 3px rgba(0,0,0,.035)}.criticality-badge{align-items:center;justify-content:center;font-style:normal;line-height:1}.criticality-select.low{border-left:4px solid #25a55a}.criticality-select.med{border-left:4px solid #d9a514}.criticality-select.high{border-left:4px solid #d34343} .check-line{grid-template-columns:none}.compact-check{justify-content:center}.defect-edit-row input,.defect-edit-row select,.category-edit-card input,.part-inline-edit input,.part-inline-edit select{padding:8px 9px}.category-edit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:9px;padding:14px}.category-edit-card{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:11px;padding:9px;background:var(--surface-2)}.nomenclature-table table{min-width:1250px}.part-inline-edit{display:grid;grid-template-columns:120px minmax(220px,1.7fr) 160px 90px 145px 70px 80px 30px auto;gap:7px;align-items:center}.part-inline-edit input[type=number]{min-width:0}.part-identity strong{display:block}.part-identity small{display:block;margin-top:2px}.part-stats{grid-template-columns:repeat(5,minmax(0,1fr))}.product-thumb{width:100%;height:90px;object-fit:contain;border-radius:8px;background:var(--surface-2)}.part-card-meta{display:flex!important;align-items:center;justify-content:space-between;gap:7px}.part-card-meta b{font-size:11px;color:var(--text)}.scooter-cost-banner{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:18px;row-gap:3px;border-radius:15px;padding:15px 18px;margin:-5px 0 18px;box-shadow:var(--shadow)}.scooter-cost-banner span{font-size:12px;color:#aab2b9;font-weight:800;text-transform:uppercase}.scooter-cost-banner strong{grid-row:1/3;grid-column:2;font-size:30px;text-align:right}.scooter-cost-banner small{color:#9ca6ae} @media(max-width:1100px){.part-stats{grid-template-columns:repeat(3,1fr)}.part-inline-edit{grid-template-columns:110px minmax(180px,1fr) 150px 80px 130px 65px 70px 30px auto}} @media(max-width:760px){.category-edit-card{grid-template-columns:auto 1fr}.category-edit-card .btn{grid-column:1/-1}.part-stats{grid-template-columns:1fr 1fr}.scooter-cost-banner{grid-template-columns:1fr}.scooter-cost-banner strong{grid-row:auto;grid-column:auto;text-align:left}} /* V0.6.0 — reports, mechanic analytics, USD */ .report-head{gap:16px}.report-period-label{font-weight:800;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px}.report-filter{display:flex;justify-content:space-between;align-items:center;gap:14px}.period-chip,.mechanic-periods a{display:inline-flex;align-items:center;padding:8px 11px;border:1px solid var(--line);background:var(--surface);border-radius:9px;color:var(--text);text-decoration:none;font-size:12px;font-weight:800}.period-chip.active,.mechanic-periods a.active{background:var(--ink);color:var(--surface);border-color:var(--ink)}.custom-period label{font-size:10px;color:var(--muted);font-weight:800}.custom-period input{display:block;margin-top:3px;padding:7px 8px}.report-summary-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.report-summary-card{border:1px solid var(--line);border-radius:13px}.report-summary-card strong{display:block;margin-top:5px;letter-spacing:-.4px}.report-summary-card small{display:block;font-size:10px;color:var(--muted);margin-top:3px}.report-tabs{margin-bottom:14px}.table-sub{display:block;margin-top:3px} .mechanic-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.mechanic-card-head h3{margin:0}.mechanic-analytics-summary{grid-template-columns:repeat(5,minmax(0,1fr))}.mechanic-analytics-summary>div{background:var(--surface);border:1px solid var(--line);border-radius:13px}.mechanic-analytics-summary span{display:block}.mechanic-analytics-summary strong{display:block;margin-top:5px}.mechanic-current-strip{display:flex;gap:7px;flex-wrap:wrap}.mechanic-current-strip span{background:var(--surface-2);border-radius:9px;padding:8px 10px;font-size:11px;color:var(--muted)}.mechanic-current-strip b{color:var(--text);font-size:14px;margin-left:4px}.performance-chart-wrap{overflow:auto}.performance-chart{display:block}.chart-grid.target{stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:7 5}.chart-trend{stroke-linecap:round;stroke-linejoin:round}.chart-point{stroke:var(--surface);stroke-width:2}.mechanic-class-grid{margin-bottom:14px}.mechanic-class-card{background:var(--surface)}.mechanic-class-card.low{border-top:4px solid var(--ok)}.mechanic-class-card.medium{border-top:4px solid var(--s-amber-fg)}.mechanic-class-card.hard{border-top:4px solid var(--danger)}.mechanic-class-title{display:flex;align-items:center;justify-content:space-between}.mechanic-class-title>strong{font-size:28px}.mechanic-class-values{grid-template-columns:repeat(3,1fr);margin-top:12px}.mechanic-class-values span{font-size:10px;color:var(--muted)}.mechanic-class-values b{display:block;font-size:14px;margin-top:3px} @media(max-width:1150px){.report-summary-grid,.mechanic-analytics-summary{grid-template-columns:repeat(3,1fr)}} @media(max-width:850px){.report-filter{align-items:stretch;flex-direction:column}.mechanic-class-values{grid-template-columns:repeat(3,1fr)}} @media(max-width:650px){.report-summary-grid,.mechanic-analytics-summary{grid-template-columns:1fr 1fr}.custom-period label{flex:1;min-width:130px}} .mechanic-overview-card>.mechanic-card-head{display:flex;grid-template-columns:none;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.mechanic-overview-card>.mechanic-card-head h3{margin:0}.mechanic-overview-card>.mechanic-card-head+.mechanic-card-head{margin-top:0} /* ========================================================= V0.7.0 — Unified strict UI / UX ========================================================= */ html,body{min-height:100%} a,button,input,select,textarea{transition:border-color .14s ease,background-color .14s ease,color .14s ease,box-shadow .14s ease,opacity .14s ease} .ui-icon{display:block} /* Shell */ .app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr);transition:grid-template-columns .2s ease} html.sidebar-collapsed .app-shell{grid-template-columns:var(--sidebar-collapsed-width) minmax(0,1fr)} .sidebar{overflow:hidden} .sidebar-brand{display:flex;align-items:center;margin-bottom:14px;white-space:nowrap;overflow:hidden} .brand-copy{display:grid;min-width:0;line-height:1.05} html.sidebar-collapsed .brand-copy,html.sidebar-collapsed .nav-label{display:none} .nav-item{white-space:nowrap} .nav-icon{display:grid;place-items:center} .nav-item.active{box-shadow:none} html.sidebar-collapsed .nav-item{justify-content:center;padding:0} /* Header */ .topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1} .icon-btn{display:grid;place-items:center;cursor:pointer;padding:0} .global-search{position:relative} .global-search-icon{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none} .global-search input{border-color:var(--line)} .global-search-results{position:absolute;left:0;right:0;z-index:70;overflow:hidden;max-height:390px;overflow-y:auto} .global-search-result{width:100%;display:grid;gap:3px;padding:10px 12px;border:0;text-align:left;cursor:pointer} .global-search-result:last-child{border-bottom:0} .global-search-main{display:flex;align-items:center;gap:8px} .global-search-main b{font-size:13px} .global-search-main em{font-style:normal;font-size:10px;border-radius:4px;padding:2px 5px} .global-search-meta{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .global-search-empty{padding:14px;color:var(--muted);font-size:12px;text-align:center} .topbar-right{white-space:nowrap} /* Page rhythm */ .content{width:100%} .page-head{min-height:40px} .page-head p{display:none} .panel-head{justify-content:space-between} .panel-head h3{letter-spacing:-.1px} .panel-head p{margin-top:2px} .compact-panel .panel-head{min-height:46px} /* Forms */ input,select,textarea{border-color:var(--line-strong);min-height:38px} textarea{min-height:76px;resize:vertical} input[type=checkbox],input[type=radio]{min-height:auto} .btn{min-height:36px;box-shadow:none} .btn.primary:hover{background:#aee600} .btn.secondary{border-color:var(--line)} .btn.secondary:hover{background:var(--line)} /* Tables */ .table-wrap{border-radius:0 0 var(--radius) var(--radius)} table{background:var(--surface)} th,td{vertical-align:middle} .table-link{font-size:12px} .status-dot{flex-basis:8px;box-shadow:none} /* Common components */ .stat,.manager-kpi,.report-summary-card,.mechanic-analytics-summary>div{border-radius:8px;box-shadow:none;padding:13px 14px} .stat strong{font-size:26px;margin-top:5px} .manager-kpi strong{font-size:28px} .action-tile{font-size:inherit} .action-tile .ui-icon{color:var(--ink-2)} .chip,.tabs a,.period-chip,.mechanic-periods a{border-radius:7px} .product-card,.repair-class,.mechanic-card,.repair-card,.mechanic-overview-card,.manager-mechanic-card,.mechanic-class-card{box-shadow:none} .timer-wrap{border-radius:8px} .modal-close{border-radius:6px} .scooter-cost-banner{border-radius:9px;box-shadow:none} /* References / nomenclature */ .references-create-grid{grid-template-columns:minmax(300px,.65fr) minmax(560px,1.35fr)} .part-create-form{grid-template-columns:repeat(2,minmax(0,1fr))} .category-edit-list{padding:5px 14px 10px} .category-edit-row{border-bottom:1px solid var(--surface-2)} .category-edit-row:last-child{border-bottom:0} .category-edit-row input[type=text],.category-edit-row input:not([type]){min-width:0} .category-edit-row .check-line{justify-self:start} .nomenclature-panel{overflow:hidden} .nomenclature-head>div:first-child{display:grid;gap:1px} .nomenclature-head>div:first-child p{display:block;margin:0} .nomenclature-search{position:relative;width:min(420px,42vw)} .nomenclature-search>span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none} .nomenclature-search input{height:36px;min-height:36px;padding:7px 9px 7px 34px;background:var(--surface-2)} .nomenclature-table-v2{min-width:1460px;table-layout:fixed} .nomenclature-table-v2 .status-col{width:36px}.nomenclature-table-v2 th:nth-child(2){width:125px}.nomenclature-table-v2 th:nth-child(3){width:290px}.nomenclature-table-v2 th:nth-child(4){width:190px}.nomenclature-table-v2 th:nth-child(5){width:95px}.nomenclature-table-v2 th:nth-child(6){width:135px}.nomenclature-table-v2 th:nth-child(7){width:75px}.nomenclature-table-v2 th:nth-child(8){width:75px}.nomenclature-table-v2 th:nth-child(9){width:90px}.nomenclature-table-v2 th:nth-child(10){width:55px}.nomenclature-table-v2 th:nth-child(11){width:150px} .nomenclature-table-v2 input,.nomenclature-table-v2 select{width:100%;height:34px;min-height:34px;padding:6px 8px;font-size:11px} .nomenclature-table-v2 .active-cell{text-align:center} .nomenclature-table-v2 .active-cell input{width:16px;height:16px;min-height:0;accent-color:#88bd00} .row-actions.nowrap{justify-content:flex-end} .icon-link{text-decoration:none} .icon-link:hover{background:var(--surface-2)} .defect-create-grid{display:grid;grid-template-columns:minmax(320px,.72fr) minmax(520px,1.28fr);gap:14px;margin-bottom:14px;align-items:stretch} .defect-create-grid>.panel{margin:0} .defect-create-grid .panel-head{min-height:58px} .defect-create-grid .panel-head>div{display:grid;gap:2px} .defect-category-create{display:grid;grid-template-columns:minmax(200px,1fr) auto;gap:10px;align-items:end} .defect-create-form{display:grid;grid-template-columns:minmax(170px,.7fr) minmax(230px,1fr) auto;gap:10px;align-items:end} .defect-create-hint{margin:-4px 15px 14px;color:var(--ink-3);font-size:11.5px} /* Remove accumulated visual noise from older modules */ .manager-kpi:hover{transform:none} .attention-row,.stock-short-row,.attention-shortcut,.pipeline-strip a,.analytics-values>div,.warehouse-summary>div,.mechanic-current-strip span,.requested-part,.part-request-state,.selected-part,.quick-create,.receipt-row{border-radius:7px;box-shadow:none} .manager-kpi.warning,.manager-kpi.danger,.manager-kpi.success{border-color:var(--line)} @media(max-width:1180px){ .references-create-grid{grid-template-columns:1fr} .defect-create-grid{grid-template-columns:1fr} .nomenclature-search{width:min(380px,50vw)} } @media(max-width:900px){ .app-shell,html.sidebar-collapsed .app-shell{grid-template-columns:1fr} .sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-width);height:100vh;z-index:90;transform:translateX(-102%);transition:transform .18s ease;box-shadow:12px 0 32px rgba(0,0,0,.18)} html.sidebar-mobile-open .sidebar{transform:translateX(0)} html.sidebar-collapsed .brand-copy,html.sidebar-collapsed .nav-label{display:initial} html.sidebar-collapsed .nav-item{justify-content:flex-start;padding:0 11px} .sidebar nav{display:grid;overflow:visible} .topbar{position:sticky} .nomenclature-head{flex-direction:column} .nomenclature-search{width:100%} } @media(max-width:680px){ .topbar{min-height:62px;align-items:flex-start} .topbar-left{width:100%} .topbar-right .clock{display:none} .category-edit-row .status-dot{display:none} .category-edit-row .btn{width:100%} .part-create-form{grid-template-columns:1fr} } /* ========================================================= V0.8.0 — KPI / Excel / sidebar hover polish ========================================================= */ .icon-check{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0;cursor:pointer} .icon-check input[type=checkbox]{width:17px;height:17px;margin:0;cursor:pointer;accent-color:#88bd00} .report-export-btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;height:36px;padding:0 11px} .kpi-date-filter input{height:36px;min-height:36px;padding:7px 9px} .kpi-rules-form{grid-template-columns:repeat(4,minmax(130px,1fr)) auto} .kpi-rules-form label{min-width:0}.kpi-rules-form .class-pill{justify-self:start}.kpi-rules-form input{height:36px;min-height:36px} .kpi-main-top{justify-content:space-between}.kpi-main-top span{font-weight:750}.kpi-main-top strong{letter-spacing:-1px} .kpi-progress,.kpi-cell-progress>div,.dashboard-kpi-progress{height:7px;background:var(--line);border-radius:999px;overflow:hidden}.kpi-progress{margin:15px 0 11px}.kpi-progress i,.kpi-cell-progress i,.dashboard-kpi-progress i{display:block;height:100%;background:var(--accent-dark);border-radius:inherit} .kpi-main-bottom{align-items:center;justify-content:space-between}.kpi-main-bottom b{color:var(--text)}.kpi-over{color:var(--ok)!important;font-style:normal} .kpi-class-points{grid-template-columns:repeat(3,1fr);padding:14px;margin-bottom:14px}.kpi-class-points>div{display:grid;place-items:center;gap:7px;border-right:1px solid var(--line)}.kpi-class-points>div:last-child{border-right:0}.kpi-class-points b{font-size:28px}.kpi-class-points small{font-size:10px} .kpi-period-strip{grid-template-columns:repeat(4,1fr)}.kpi-period-strip>div{background:var(--surface);border:1px solid var(--line);border-radius:7px}.kpi-period-strip span{display:block}.kpi-period-strip strong{display:block;margin-top:4px} .kpi-board-table{min-width:1280px}.kpi-cell-progress{display:grid;grid-template-columns:minmax(100px,1fr) 78px;gap:8px;align-items:center}.kpi-cell-progress span{font-size:10px;color:var(--muted);white-space:nowrap} .kpi-comment-cell{width:260px;min-width:220px}.kpi-comment-btn{display:block;width:100%;max-width:300px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--ink);text-align:left;cursor:pointer}.kpi-comment-btn:hover,.kpi-comment-btn:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.kpi-comment-btn span,.kpi-comment-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.35;white-space:normal}.kpi-comment-btn.is-empty{border-style:dashed;color:var(--link);font-weight:700}.kpi-comment-btn:disabled{opacity:.6;cursor:wait} .manager-dashboard-compact .manager-kpi-grid.compact{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.manager-dashboard-compact .manager-kpi{min-height:86px;padding:13px 14px}.manager-dashboard-compact .manager-kpi span{font-size:11px}.manager-dashboard-compact .manager-kpi strong{font-size:29px;margin-top:5px}.manager-dashboard-compact .manager-kpi small{display:none} .dashboard-metrics-strip{grid-template-columns:repeat(5,minmax(0,1fr))}.dashboard-metrics-strip>div{background:var(--surface)}.dashboard-metrics-strip span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.25px}.dashboard-metrics-strip strong{display:block;margin-top:4px}.compact-grid{align-items:start}.compact-grid .panel{margin-bottom:0} .dashboard-kpi-row{grid-template-columns:minmax(130px,1fr) minmax(90px,1fr) 72px 42px;border-bottom:1px solid var(--line);text-decoration:none}.dashboard-kpi-row:last-child{border-bottom:0}.dashboard-kpi-row strong{font-size:12px;text-align:right}.dashboard-kpi-row em{font-size:11px;font-weight:850;color:var(--ok);font-style:normal;text-align:right}.manager-mechanic-grid.compact{grid-template-columns:1fr}.manager-mechanic-grid.compact .manager-mechanic-card{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 13px}.manager-mechanic-grid.compact .manager-mechanic-card:last-child{border-bottom:0}.warehouse-summary.compact{grid-template-columns:repeat(3,1fr);padding:10px 12px} @media(min-width:901px){ html.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-width);z-index:80;transition:width .22s cubic-bezier(.22,.8,.28,1),box-shadow .22s ease} html.sidebar-collapsed .sidebar:hover{width:var(--sidebar-width);box-shadow:18px 0 34px rgba(0,0,0,.18)} html.sidebar-collapsed .sidebar .brand-copy{display:grid;opacity:0;visibility:hidden;transition:opacity .12s ease} html.sidebar-collapsed .sidebar .nav-label{display:inline-block;opacity:0;visibility:hidden;transition:opacity .12s ease} html.sidebar-collapsed .sidebar:hover .brand-copy,html.sidebar-collapsed .sidebar:hover .nav-label{opacity:1;visibility:visible;transition-delay:.06s} html.sidebar-collapsed .sidebar .nav-item{transition:padding .22s ease,background-color .14s ease,color .14s ease} html.sidebar-collapsed .sidebar:hover .nav-item{justify-content:flex-start;padding:0 11px} } @media(max-width:1180px){.manager-dashboard-compact .manager-kpi-grid.compact{grid-template-columns:repeat(3,1fr)}.dashboard-metrics-strip{grid-template-columns:repeat(3,1fr)}.kpi-rules-form{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.manager-dashboard-compact .manager-kpi-grid.compact{grid-template-columns:repeat(2,1fr)}.dashboard-metrics-strip{grid-template-columns:1fr 1fr}.kpi-period-strip{grid-template-columns:1fr 1fr}.kpi-class-points{grid-template-columns:1fr}.kpi-class-points>div{border-right:0;border-bottom:1px solid var(--line);padding:10px}.kpi-class-points>div:last-child{border-bottom:0}.kpi-rules-form{grid-template-columns:1fr}.report-head-actions{justify-content:flex-end}} /* ========================================================= V0.8.1 — desktop sidebar geometry / ultra-fast smooth hover ========================================================= */ @media(min-width:901px){ .app-shell{grid-template-columns:var(--sidebar-width) minmax(0,1fr);transition:grid-template-columns var(--sidebar-motion) var(--sidebar-ease)} html.sidebar-collapsed .app-shell{grid-template-columns:var(--sidebar-collapsed-width) minmax(0,1fr)} .sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);overflow:hidden;z-index:80;will-change:width;transition: width var(--sidebar-motion) var(--sidebar-ease), min-width var(--sidebar-motion) var(--sidebar-ease), box-shadow var(--sidebar-motion) ease} /* One fixed optical axis for brand, every menu icon and logout icon. */ .sidebar-brand{margin-bottom:10px} .nav-item{justify-content:flex-start} .nav-icon{flex-basis:20px} html.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-width);min-width:var(--sidebar-collapsed-width);padding-left:7px;padding-right:7px;box-shadow:none} /* Keep icon X position identical before, during and after expansion. */ html.sidebar-collapsed .sidebar .nav-item{justify-content:flex-start;padding:0 12px} /* Labels stay in layout but are visually hidden, eliminating the jump. */ html.sidebar-collapsed .sidebar .brand-copy, html.sidebar-collapsed .sidebar .nav-label{display:grid;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-3px);transition: opacity 70ms linear, transform 90ms var(--sidebar-ease), visibility 0s linear 90ms} html.sidebar-collapsed .sidebar .nav-label{display:inline-block} /* Zero hover delay; the panel opens above content, so the page never shifts. */ html.sidebar-collapsed .sidebar:hover{width:var(--sidebar-width);min-width:var(--sidebar-width);box-shadow:12px 0 28px rgba(0,0,0,.14)} html.sidebar-collapsed .sidebar:hover .brand-copy, html.sidebar-collapsed .sidebar:hover .nav-label{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);transition: opacity 80ms linear 25ms, transform 100ms var(--sidebar-ease) 10ms, visibility 0s} /* Prevent legacy hover rules from changing icon alignment. */ html.sidebar-collapsed .sidebar:hover .nav-item{justify-content:flex-start;padding:0 12px} } /* ========================================================= V0.8.2 — stable hover intent + smooth overlay sidebar ========================================================= */ @media(min-width:901px){ /* Keep the application grid fixed while the collapsed rail temporarily opens. */ html.sidebar-collapsed .app-shell{grid-template-columns:var(--sidebar-collapsed-width) minmax(0,1fr)} html.sidebar-collapsed .sidebar{width:var(--sidebar-collapsed-width);min-width:var(--sidebar-collapsed-width);overflow:hidden;box-shadow:none;transition: width var(--sidebar-motion) var(--sidebar-ease), min-width var(--sidebar-motion) var(--sidebar-ease), box-shadow 280ms ease;will-change:width} /* Disable the old raw :hover trigger. Opening is controlled by JS hover-intent. */ html.sidebar-collapsed .sidebar:hover{width:var(--sidebar-collapsed-width);min-width:var(--sidebar-collapsed-width);box-shadow:none} html.sidebar-collapsed.sidebar-peek .sidebar, html.sidebar-collapsed.sidebar-peek .sidebar:hover{width:var(--sidebar-width);min-width:var(--sidebar-width);box-shadow:14px 0 30px rgba(0,0,0,.15)} html.sidebar-collapsed .sidebar .brand-copy, html.sidebar-collapsed .sidebar .nav-label{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-5px);transition: opacity 150ms ease, transform 220ms var(--sidebar-ease), visibility 0s linear 220ms} html.sidebar-collapsed.sidebar-peek .sidebar .brand-copy, html.sidebar-collapsed.sidebar-peek .sidebar .nav-label{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(0);transition: opacity 210ms ease 110ms, transform 300ms var(--sidebar-ease) 70ms, visibility 0s} html.sidebar-collapsed.sidebar-peek .sidebar .nav-item, html.sidebar-collapsed.sidebar-peek .sidebar:hover .nav-item{justify-content:flex-start;padding:0 12px} } /* ========================================================= V0.9.0 — management reports final ========================================================= */ .btn.ghost{border:1px solid var(--line);text-decoration:none;display:inline-flex;align-items:center;justify-content:center} .report-summary-grid-v090{grid-template-columns:repeat(6,minmax(0,1fr))} .report-overview-grid{margin-bottom:18px} .report-overview-grid .panel{margin-bottom:0} .compact-report-list>a,.compact-report-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text);align-items:center} .compact-report-list>a:last-child,.compact-report-list>div:last-child{border-bottom:0} .compact-report-list span{font-weight:750} .compact-report-list strong{text-align:right} .compact-report-list small{grid-column:1/-1} .report-inline-filter{padding:12px 14px;margin-bottom:14px} .report-inline-filter label{min-width:210px} .report-inline-filter .btn{height:40px} .panel-head{justify-content:space-between} .panel-count{display:inline-flex;min-width:28px;height:24px;padding:0 8px;border-radius:999px;background:var(--surface-2);align-items:center;justify-content:center} .panel-note{font-weight:700} .report-register{min-width:1500px} .report-defects-cell{max-width:340px;white-space:normal;line-height:1.35} .positive-text{color:var(--ok)} @media(max-width:1250px){.report-summary-grid-v090{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){.report-inline-filter{grid-template-columns:1fr 1fr}.report-inline-filter .btn{width:100%}} @media(max-width:620px){.report-summary-grid-v090{grid-template-columns:1fr 1fr}.report-inline-filter{grid-template-columns:1fr}.report-inline-filter label{min-width:0}} /* V0.11.0 · Live operations / SC TV board */ .page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.mechanic-overview-card.live{position:relative;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease}.mechanic-overview-card.live:before,.mechanic-tv-card:before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:#77818a}.mechanic-overview-card.pace-progress:before,.mechanic-tv-card.pace-progress:before{background:#e6ad20}.mechanic-overview-card.pace-near:before,.mechanic-tv-card.pace-near:before{background:#4aa56f}.mechanic-overview-card.pace-target:before,.mechanic-tv-card.pace-target:before{background:#68c96e}.mechanic-overview-card.pace-kpi:before,.mechanic-tv-card.pace-kpi:before{background:var(--accent)}.mechanic-overview-card.pace-attention:before,.mechanic-tv-card.pace-attention:before{background:#e15858}.mechanic-overview-person{display:flex;align-items:center;gap:11px}.mechanic-overview-person h3{margin:0}.mechanic-overview-person span{font-size:12px;color:var(--muted)}.mechanic-mini-avatar{background:#171b20!important;color:#fff!important;font-size:12px!important}.mechanic-overview-progress,.mechanic-tv-progress{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:12px 0}.mechanic-overview-progress i,.mechanic-tv-progress i{height:100%;display:block;background:var(--accent-dark);border-radius:inherit;transition:width .5s ease}.mechanic-live-current{margin:10px 0}.mechanic-live-current>b{font-variant-numeric:tabular-nums;font-size:19px;margin-top:2px}.mechanic-overview-numbers{display:grid!important;grid-template-columns:repeat(6,1fr)!important}.mechanic-overview-numbers span{font-size:10px!important;text-align:center}.mechanic-overview-numbers b{display:block;margin-top:2px} .page-mechanics-live{background:#0c1014;overflow-x:hidden}.page-mechanics-live .app-shell{display:block;min-height:100vh}.page-mechanics-live .sidebar,.page-mechanics-live .topbar{display:none!important}.page-mechanics-live .main{min-height:100vh}.page-mechanics-live .content{padding:0;max-width:none}.tv-board-shell{min-height:100vh;background:#0c1014;color:#fff}.tv-board-head{height:82px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #252b31;background:#11161b}.tv-board-head>div:first-child{display:grid;gap:3px}.tv-board-head>div:first-child strong{font-size:22px;color:var(--accent);letter-spacing:.3px}.tv-board-head>div:first-child span{color:#9aa5ad;font-size:13px}.tv-board-head-right{display:flex;align-items:center;gap:18px}.tv-board-head-right>strong{font-size:26px;font-variant-numeric:tabular-nums}.tv-board-head-right>a{color:#cbd3d9;text-decoration:none;border:1px solid #343c43;padding:8px 11px;border-radius:8px;font-size:12px}.tv-live{display:inline-flex;align-items:center;gap:8px;background:#1b2118;border:1px solid #324329;padding:8px 11px;border-radius:999px;font-size:12px;font-weight:900}.tv-live i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(184,242,12,.8)}.tv-board-main{padding:20px 26px}.tv-board-summary{display:flex;justify-content:space-between;color:#98a3ab;font-size:13px;margin-bottom:14px}.tv-board-summary b{color:#fff}.mechanics-tv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:15px}.mechanic-tv-card{position:relative;overflow:hidden;background:#141a1f;border:1px solid #293139;border-radius:16px;padding:18px;min-height:260px}.mechanic-tv-card.pace-kpi{border-color:#6f9517;box-shadow:0 0 28px rgba(184,242,12,.08)}.mechanic-tv-card.pace-attention{border-color:#783b3b}.mechanic-tv-top{display:grid;grid-template-columns:54px 1fr auto;align-items:center;gap:12px}.mechanic-avatar{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#222a31;border:1px solid #39434b;font-weight:950;font-size:16px}.pace-kpi .mechanic-avatar{background:var(--accent);color:#131900;border-color:var(--accent)}.pace-target .mechanic-avatar,.pace-near .mechanic-avatar{background:#24422f;border-color:#3f7050}.pace-attention .mechanic-avatar{background:#492828;border-color:#7d4242}.mechanic-tv-name{display:grid;gap:3px}.mechanic-tv-name strong{font-size:21px}.mechanic-tv-name span{font-size:12px;color:#9ca7af}.pace-kpi .mechanic-tv-name span{color:var(--accent)}.mechanic-tv-points{text-align:right}.mechanic-tv-points strong{display:block;font-size:34px;line-height:1;color:var(--accent)}.mechanic-tv-points span{color:#8e99a1;font-size:11px}.mechanic-tv-card .mechanic-tv-progress{background:#252d34;height:8px}.mechanic-tv-card .mechanic-live-current{background:#101519;border-color:#2a3239;color:#fff;min-height:77px}.mechanic-tv-card .mechanic-live-current>span,.mechanic-tv-card .mechanic-live-current small{color:#8e99a1}.mechanic-tv-card .mechanic-live-current.in_progress{border-color:#58751e;background:#151d0f}.mechanic-tv-card .mechanic-live-current.waiting_part{border-color:#745d27;background:#1e190e}.mechanic-tv-card .mechanic-live-current.returned{border-color:#743a3a;background:#211111}.mechanic-live-timer{color:var(--accent)}.mechanic-tv-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px}.mechanic-tv-stats span{background:#101519;border:1px solid #252d33;border-radius:9px;padding:7px;text-align:center;color:#88939b;font-size:10px}.mechanic-tv-stats b{display:block;color:#fff;font-size:18px;margin-top:2px}.tv-empty{padding:80px;text-align:center;color:#8e99a1;font-size:20px} @media(max-width:900px){.mechanic-overview-numbers{grid-template-columns:repeat(3,1fr)!important}.mechanics-tv-grid{grid-template-columns:1fr}.tv-board-head{padding:0 16px}.tv-board-head>div:first-child span{display:none}.tv-board-main{padding:14px}.mechanic-tv-card{min-height:auto}} /* V0.12.0 — expected incoming stock */ @media(max-width:900px){.section-actions{align-items:stretch;flex-direction:column}} /* V0.13.0 — mechanics layout + TV board + realtime states */ .mechanics-overview{align-items:start} .mechanic-overview-card.live{min-width:0;padding:16px} .mechanic-overview-card.live>div{display:block;grid-template-columns:none} .mechanic-overview-head{display:grid!important;grid-template-columns:44px minmax(0,1fr) auto!important;gap:12px!important} .mechanic-overview-identity h3{margin:0!important;line-height:1.18;overflow-wrap:anywhere;word-break:normal;min-width:0} .mechanic-overview-card .mechanic-score-line{display:block;background:transparent!important;border-radius:0!important;padding:0!important;font-size:12px!important;color:var(--muted)!important} .mechanic-analytics-link{white-space:nowrap;align-self:center} .mechanic-mini-avatar{padding:0!important;border-radius:12px!important} .mechanic-overview-progress{margin:12px 0 10px!important} .mechanic-overview-card .mechanic-live-current{display:grid!important;grid-template-columns:1fr!important;min-width:0} .mechanic-overview-numbers{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important} .mechanic-overview-numbers span{min-width:0;padding:8px 5px!important;overflow:hidden;text-overflow:ellipsis} .page-mechanics-live{overflow:hidden!important;background:#0b1014} .page-mechanics-live .app-shell,.page-mechanics-live .main,.page-mechanics-live .content{height:100vh!important;min-height:0!important;overflow:hidden!important} .tv-board-shell{height:100vh;min-height:0;display:grid;grid-template-rows:68px minmax(0,1fr);overflow:hidden;background:#0b1014} .tv-board-head{height:68px;padding:0 24px;min-width:0} .tv-board-head .tv-brand{min-width:0} .tv-board-head>div:first-child strong{font-size:20px;white-space:nowrap} .tv-board-head>div:first-child span{font-size:12px} .tv-board-head-right{gap:14px;flex:0 0 auto} .tv-board-head-right>strong{font-size:24px} .tv-board-head-right>a{padding:7px 10px} .tv-live[data-state="reconnecting"],.tv-live[data-state="fallback"],.live-badge[data-state="reconnecting"],.live-badge[data-state="fallback"]{border-color:#725b24;background:#251f12} .tv-live[data-state="reconnecting"] i,.tv-live[data-state="fallback"] i,.live-badge[data-state="reconnecting"] i,.live-badge[data-state="fallback"] i{background:#e1ad35;box-shadow:0 0 10px rgba(225,173,53,.6)} .tv-board-main{height:100%;min-height:0;padding:12px 18px 16px;display:grid;grid-template-rows:32px minmax(0,1fr);gap:8px;overflow:hidden} .tv-board-summary{margin:0;display:grid;grid-template-columns:repeat(4,max-content) minmax(130px,1fr);align-items:center;gap:20px;color:#93a0a9;font-size:12px;min-width:0} .tv-board-summary span:last-child{text-align:right;white-space:nowrap} .mechanics-tv-grid{height:100%;min-height:0;display:grid;gap:12px;overflow:hidden;align-items:stretch} .mechanics-tv-grid[data-count="1"]{grid-template-columns:1fr;grid-template-rows:1fr} .mechanics-tv-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr} .mechanics-tv-grid[data-count="3"],.mechanics-tv-grid[data-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))} .mechanics-tv-grid[data-count="5"],.mechanics-tv-grid[data-count="6"]{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))} .mechanics-tv-grid[data-count="7"],.mechanics-tv-grid[data-count="8"]{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))} .mechanic-tv-card{height:100%;min-height:0;padding:clamp(10px,1.15vw,17px);border-radius:13px;display:grid;grid-template-rows:auto 7px minmax(64px,1fr) auto;gap:8px;overflow:hidden} .mechanic-tv-top{grid-template-columns:clamp(42px,3.6vw,54px) minmax(0,1fr) auto;gap:10px;min-width:0} .mechanic-avatar{width:clamp(42px,3.6vw,54px);height:clamp(42px,3.6vw,54px);font-size:clamp(13px,1.1vw,17px)} .mechanic-tv-name{min-width:0;gap:2px} .mechanic-tv-name strong{font-size:clamp(16px,1.45vw,23px);line-height:1.12;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere} .mechanic-tv-name span{font-size:clamp(10px,.78vw,12px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mechanic-tv-points strong{font-size:clamp(28px,2.4vw,40px)} .mechanic-tv-points span{font-size:10px;white-space:nowrap} .mechanic-tv-card .mechanic-tv-progress{height:7px;margin:0} .mechanic-tv-card .mechanic-live-current{min-height:0;height:100%;margin:0;padding:clamp(8px,.8vw,12px);align-content:center;gap:2px;overflow:hidden} .mechanic-tv-card .mechanic-live-current>span{font-size:9px} .mechanic-tv-card .mechanic-live-current>strong{font-size:clamp(13px,1vw,17px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mechanic-tv-card .mechanic-live-current small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px} .mechanic-tv-card .mechanic-live-current>b{font-size:clamp(18px,1.5vw,25px);line-height:1.05} /* Доска всегда тёмная, а правила редизайна красят блок «Сейчас» токенами: --ink на доске пришпилен к тёмному значению (см. блок «ЭКРАН СЦ» в конце файла), --s-*-fg тёмные в светлой теме. Без явных цветов номер самоката и «Свободен» сливались с фоном карточки. */ .mechanic-tv-card .mechanic-live-current>strong{color:#fff} .mechanic-tv-card .mechanic-live-current.in_progress>span{color:var(--accent)} .mechanic-tv-card .mechanic-live-current.waiting_part>span{color:#e1ad35} .mechanic-tv-card .mechanic-live-current.awaiting_control{border-color:#4b3a85;background:#17142a} .mechanic-tv-card .mechanic-live-current.awaiting_control>span{color:#b49cff} .mechanic-tv-card .mechanic-live-current.returned>span{color:#ff7b7b} .mechanic-tv-stats{margin:0;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} .mechanic-tv-stats span{min-width:0;padding:6px 3px;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mechanic-tv-stats b{font-size:clamp(15px,1.25vw,20px);margin-top:1px} /* 7–8 карточек (4×2): колонка на четверть уже, поэтому аватар, имя и баллы мельче, а имя — в одну строку. */ .mechanics-tv-grid[data-count="7"] .mechanic-tv-top,.mechanics-tv-grid[data-count="8"] .mechanic-tv-top{grid-template-columns:clamp(34px,2.6vw,44px) minmax(0,1fr) auto;gap:8px} .mechanics-tv-grid[data-count="7"] .mechanic-avatar,.mechanics-tv-grid[data-count="8"] .mechanic-avatar{width:clamp(34px,2.6vw,44px);height:clamp(34px,2.6vw,44px);font-size:clamp(11px,.85vw,14px)} .mechanics-tv-grid[data-count="7"] .mechanic-tv-name strong,.mechanics-tv-grid[data-count="8"] .mechanic-tv-name strong{display:block;-webkit-line-clamp:unset;font-size:clamp(14px,1.1vw,19px);white-space:nowrap;text-overflow:ellipsis} .mechanics-tv-grid[data-count="7"] .mechanic-tv-points strong,.mechanics-tv-grid[data-count="8"] .mechanic-tv-points strong{font-size:clamp(22px,1.8vw,32px)} .mechanics-tv-grid[data-count="7"] .mechanic-tv-stats span,.mechanics-tv-grid[data-count="8"] .mechanic-tv-stats span{padding:5px} .mechanics-tv-grid[data-count="7"] .mechanic-tv-stats b,.mechanics-tv-grid[data-count="8"] .mechanic-tv-stats b{font-size:clamp(13px,1vw,17px)} .tv-overflow{font-style:normal;font-weight:700;color:#e1ad35;margin-left:4px} @media(max-width:1499px){ .mechanics-tv-grid[data-count="7"],.mechanics-tv-grid[data-count="8"]{gap:8px} .mechanics-tv-grid[data-count="7"] .mechanic-tv-card,.mechanics-tv-grid[data-count="8"] .mechanic-tv-card{padding:10px;gap:6px} .mechanics-tv-grid[data-count="7"] .mechanic-tv-stats,.mechanics-tv-grid[data-count="8"] .mechanic-tv-stats{gap:4px} .mechanics-tv-grid[data-count="7"] .mechanic-tv-stats span,.mechanics-tv-grid[data-count="8"] .mechanic-tv-stats span{padding:4px 2px;font-size:9px} } .tv-empty{display:grid;place-items:center;height:100%;padding:20px} @media(max-height:760px){ .tv-board-shell{grid-template-rows:58px minmax(0,1fr)} .tv-board-head{height:58px} .tv-board-main{padding:8px 12px 10px;grid-template-rows:26px minmax(0,1fr);gap:6px} .tv-board-summary{font-size:10px;gap:12px} .mechanics-tv-grid{gap:8px} .mechanic-tv-card{padding:9px;gap:6px} .mechanic-tv-card .mechanic-live-current{padding:7px} .mechanic-tv-stats span{padding:4px 2px} } @media(max-width:900px){ .mechanic-overview-head{grid-template-columns:44px minmax(0,1fr)!important} .mechanic-analytics-link{grid-column:2;justify-self:start} .page-mechanics-live{overflow:auto!important} .page-mechanics-live .app-shell,.page-mechanics-live .main,.page-mechanics-live .content{height:auto!important;min-height:100vh!important;overflow:visible!important} .tv-board-shell{height:auto;min-height:100vh;display:block;overflow:visible} .tv-board-main{height:auto;display:block;overflow:visible} .tv-board-summary{display:flex;flex-wrap:wrap;margin-bottom:10px} .mechanics-tv-grid{height:auto;display:grid;grid-template-columns:1fr!important;grid-template-rows:none!important;overflow:visible} .mechanic-tv-card{height:auto;min-height:250px} } /* V0.13.1 — flexible mechanic analytics, inline roles, bulk nomenclature */ .mechanic-analytics-head{align-items:flex-start}.mechanic-range-caption{margin-top:5px;font-weight:750}.mechanic-period-controls{justify-content:flex-end}.mechanic-custom-period{margin:0}.mechanic-custom-period .btn{height:34px;min-height:34px}.mechanic-custom-period input{height:34px;min-height:34px}.user-role-edit{display:flex;align-items:center;gap:6px;min-width:250px}.user-role-edit select{min-width:135px;height:34px;min-height:34px;padding:6px 8px}.compact-role-save{height:34px;min-height:34px;padding:6px 10px}.user-role-current{display:inline-flex;align-items:center;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);font-weight:750}.nomenclature-head.bulk-enabled{gap:14px}.nomenclature-head-actions{align-items:center;justify-content:flex-end;flex:1}.nomenclature-bulk-save{display:flex;align-items:center;gap:8px;white-space:nowrap}.nomenclature-bulk-save span{font-size:11px;color:var(--muted);font-weight:800;min-width:92px;text-align:right}.nomenclature-bulk-save .btn{height:36px;min-height:36px}.nomenclature-bulk-save.is-dirty{position:fixed;right:24px;bottom:24px;z-index:80;border:1px solid #2a3137;border-radius:12px;padding:10px 12px;box-shadow:0 14px 36px rgba(0,0,0,.22)}.nomenclature-bulk-save.is-dirty span{color:#d7dde1;min-width:auto}.nomenclature-bulk-save.is-dirty .btn{background:var(--accent);border-color:var(--accent);color:#101418}.nomenclature-row{transition:background .16s ease,box-shadow .16s ease}.nomenclature-row.row-dirty{box-shadow:inset 3px 0 0 var(--accent)}.nomenclature-row.row-dirty td{background:transparent}.row-save-state{width:7px;height:7px;border-radius:50%;background:transparent;display:inline-block}.row-dirty .row-save-state{background:var(--accent);box-shadow:0 0 0 3px rgba(173,255,0,.13)} @media(max-width:1150px){.mechanic-period-controls{justify-content:flex-start}.nomenclature-head-actions{width:100%;justify-content:space-between}.nomenclature-head.bulk-enabled{align-items:stretch;flex-direction:column}.nomenclature-search{width:min(520px,60vw)}} @media(max-width:700px){.mechanic-period-controls,.mechanic-custom-period,.nomenclature-head-actions,.nomenclature-bulk-save{width:100%}.mechanic-custom-period{grid-template-columns:1fr 1fr}.mechanic-custom-period .btn{grid-column:1/-1}.nomenclature-head-actions{align-items:stretch;flex-direction:column}.nomenclature-search{width:100%}.nomenclature-bulk-save{justify-content:space-between}.user-role-edit{min-width:0;flex-direction:column;align-items:stretch}.user-role-edit select{min-width:0}} /* V0.14.0 — Final Polish */ .btn,.icon-btn,.nav-item,.table-link,.icon-link,.chip{transition:border-color .16s ease,background-color .16s ease,color .16s ease,box-shadow .16s ease,opacity .16s ease,transform .16s ease} .btn:active:not(:disabled),.icon-btn:active:not(:disabled){transform:translateY(1px)} .global-search-result.keyboard-active{box-shadow:inset 3px 0 0 var(--accent-dark)} .live-badge,.tv-live{transition:background-color .18s ease,border-color .18s ease,color .18s ease} .live-badge .live-label,.tv-live .live-label{white-space:nowrap} .live-badge[data-state="live"],.tv-live[data-state="live"]{background:#111;color:#fff} .live-badge[data-state="connecting"],.tv-live[data-state="connecting"]{background:#1c2228;color:#e6eaed} .live-badge[data-state="reconnecting"],.live-badge[data-state="fallback"],.tv-live[data-state="reconnecting"],.tv-live[data-state="fallback"]{background:#2b2414;color:#f0d58c;border-color:#725b24} .live-badge[data-state="stale"],.tv-live[data-state="stale"]{background:#3a1717;color:#ffd0d0;border-color:#7a3333} .live-badge[data-state="stale"] i,.tv-live[data-state="stale"] i{background:#e05252;box-shadow:0 0 0 5px rgba(224,82,82,.14)} .toast-stack{position:fixed;right:20px;top:92px;z-index:2000;display:grid;gap:9px;width:min(390px,calc(100vw - 32px));pointer-events:none} .toast{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:12px 13px;border:1px solid var(--line);box-shadow:0 14px 38px rgba(16,24,32,.18);opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease;pointer-events:auto;font-size:13px;line-height:1.35} .toast.show{opacity:1;transform:none}.toast button{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:20px;line-height:16px;padding:0} .toast-success{border-left:4px solid var(--success)}.toast-error{border-left:4px solid var(--danger)}.toast-info{border-left:4px solid #718096} .yoto-dialog{border:0;padding:0;background:transparent;max-width:none}.yoto-dialog::backdrop{background:rgba(7,11,14,.58);backdrop-filter:blur(2px)} .yoto-dialog-card{width:min(470px,calc(100vw - 32px));box-shadow:0 24px 70px rgba(0,0,0,.3);padding:0;overflow:hidden} .yoto-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 18px;border-bottom:1px solid var(--line)}.yoto-dialog-head h3{margin:0;font-size:17px}.dialog-x{border:0;background:transparent;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px} .yoto-dialog-card>p{margin:0;padding:17px 18px 10px;color:var(--ink-2);font-size:14px;line-height:1.45}.dialog-input{width:calc(100% - 36px);margin:0 18px 4px;resize:vertical;min-height:78px}.yoto-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px 17px} .nomenclature-bulk-save{display:flex;align-items:center;gap:8px}.nomenclature-bulk-save #resetNomenclatureBulk{display:none}.nomenclature-bulk-save.is-dirty #resetNomenclatureBulk{display:inline-flex} .row-dirty{background:var(--s-lime-bg)}.row-dirty td:first-child{box-shadow:inset 3px 0 0 var(--accent-dark)} .content>.page-head:first-child{margin-top:0}.page-head{min-height:42px}.page-head>div:first-child{min-width:0}.page-head h2{overflow-wrap:anywhere}.page-actions,.row-badges{min-width:0} .panel-head{justify-content:space-between}.panel-head>div{min-width:0} .table-wrap table th{z-index:1}.table-wrap:focus-within{scrollbar-color:var(--line-strong) transparent} @media(max-width:1100px){.report-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:700px){.toast-stack{top:74px;right:12px}.page-head{flex-direction:column}.page-actions,.row-badges{width:100%;flex-wrap:wrap}.report-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nomenclature-bulk-save{width:100%;justify-content:flex-end}.nomenclature-head-actions{align-items:stretch}.yoto-dialog-actions{display:grid;grid-template-columns:1fr 1fr}.yoto-dialog-actions .btn{width:100%}} /* ========================================================= V0.14.1 — 24/7 TV kiosk role ========================================================= */ .kiosk-display .tv-board-head-right{gap:12px} .tv-fullscreen-btn{width:38px;height:38px;border:1px solid #343c43;border-radius:8px;background:#11161b;color:#cbd3d9;font:700 19px/1 system-ui;display:grid;place-items:center;cursor:pointer} .tv-fullscreen-btn:hover{border-color:#617127;color:#b8f20c} .kiosk-display.kiosk-cursor-hidden,.kiosk-display.kiosk-cursor-hidden *{cursor:none!important} .kiosk-display .tv-board-shell{user-select:none} /* ========================================================================= НОВАЯ СИСТЕМА — визуальный язык из design/design-sc.html. Всё ниже перекрывает наследие. Геометрию сворачивания меню (переходы, hover-intent, оверлей на узких экранах) намеренно не трогаем — она живёт в наследии и работает; здесь только слой оформления. ========================================================================= */ /* --- База --------------------------------------------------------------- */ html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased} a{color:var(--link);text-decoration:none} a:hover{color:var(--link-h)} ::selection{background:var(--accent);color:var(--accent-ink)} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px; border:3px solid transparent;background-clip:content-box} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .ui-icon{flex:0 0 auto} .mono,.num{font-family:var(--num);font-variant-numeric:tabular-nums} /* --- Каркас: боковое меню ------------------------------------------------ */ .sidebar{background:var(--nav);border-right:1px solid var(--nav-line);padding:12px 10px} .sidebar-brand{height:var(--topbar-h);margin:-12px -10px 8px;padding:0 16px 0 23px; border-bottom:1px solid var(--nav-line);gap:11px} .brand-logo{display:block;flex:0 0 auto;width:75px;overflow:hidden; transition:width var(--sidebar-motion) var(--sidebar-ease)} .brand-logo img{display:block;width:auto;max-width:none;height:20px} .brand-copy{color:#fff;font-size:19px;font-weight:800;letter-spacing:.01em} /* В свёрнутом меню контейнер обрезает логотип до «Y» (16px при высоте 20px), при раскрытии «OTO» выезжает вместе с шириной меню. Только для широкого экрана: на узком меню — выдвижная панель, логотип в ней целиком. */ @media(min-width:901px){ html.sidebar-collapsed .sidebar .brand-logo{width:16px} html.sidebar-collapsed.sidebar-peek .sidebar .brand-logo{width:75px} } .nav-group{padding:12px 8px 6px;font-size:10px;font-weight:700;letter-spacing:.16em; color:var(--nav-ink-2);white-space:nowrap;overflow:hidden} .nav-group:first-child{padding-top:4px} html.sidebar-collapsed .nav-group{opacity:0;height:12px;padding:0;pointer-events:none} html.sidebar-collapsed.sidebar-peek .nav-group{opacity:1;height:auto;padding:12px 8px 6px} .sidebar nav{gap:2px} .nav-item{position:relative;height:36px;gap:11px;padding:0 10px;border-radius:9px; color:var(--nav-ink);font-size:13px;font-weight:600} .nav-icon{width:18px;flex:0 0 18px;color:inherit} .nav-item:hover{background:var(--nav-hover);color:#fff} .nav-item.active{background:var(--nav-active);color:#fff} .nav-item.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px; border-radius:0 3px 3px 0;background:var(--accent)} .nav-item.active .nav-icon{color:var(--accent)} /* --- Каркас: верхняя панель --------------------------------------------- */ .topbar{height:var(--topbar-h);padding:0 20px;gap:12px;background:var(--surface); border-bottom:1px solid var(--line)} .icon-btn{width:34px;height:34px;border:1px solid var(--line);background:var(--surface); border-radius:9px;color:var(--ink-2)} .icon-btn:hover{border-color:var(--accent);background:var(--surface);color:var(--ink)} /* Поиск свёрнут в кнопку «Поиск»; .open (клик или ⌘K, см. app.js) раскрывает поле. */ .global-search{width:min(560px,52vw);transition:width .18s ease} .global-search:not(.open){width:148px} .global-search:not(.open) input,.global-search.open .global-search-btn{display:none} .global-search-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 74px 0 34px;border-radius:9px; background:var(--surface-2);border:1px solid var(--line);color:var(--ink-3);font-size:13px;cursor:pointer; transition:border-color .16s ease,color .16s ease} .global-search-btn:hover{border-color:var(--accent);color:var(--ink-2)} .global-search-icon{left:12px;color:var(--ink-3)} .global-search input{height:36px;padding:0 74px 0 34px;border-radius:9px; background:var(--surface-2);border:1px solid var(--line);color:var(--ink);font-size:13px} .global-search input:focus{background:var(--surface);border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)} .search-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:3px; font-family:var(--num);font-size:10px;font-weight:600;color:var(--ink-3);pointer-events:none} .search-kbd span{padding:2px 5px;border:1px solid var(--line);border-radius:5px;background:var(--surface)} .global-search-results{top:44px;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);box-shadow:0 12px 28px rgba(14,19,23,.12)} .global-search-result{background:var(--surface);border-bottom:1px solid var(--line);color:var(--ink)} .global-search-result:hover,.global-search-result.keyboard-active{background:var(--surface-2)} .global-search-main em{background:var(--surface-2);color:var(--ink-3)} .topbar-right{gap:8px} .version{font-family:var(--num);font-size:11px;font-weight:600;padding:3px 7px; border-radius:6px;background:var(--surface-2);color:var(--ink-2)} .clock{font-family:var(--num);font-size:12px;font-weight:500;color:var(--ink-2)} .font-scale button:focus-visible,.seg-control button:focus-visible,.theme-switch:focus-visible,.user-menu-btn:focus-visible, .user-menu-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Размер шрифта: A / A+ / A++. Что именно масштабируется — ниже, у .content. Те же сегменты (.seg-control) — у интервала автообновления на странице «Настройки». */ .font-scale,.seg-control{display:inline-flex;align-items:center;gap:2px;height:32px;padding:3px;border:1px solid var(--line); border-radius:9px;background:var(--surface-2)} .font-scale button,.seg-control button{height:24px;min-width:30px;padding:0 7px;border:1px solid transparent;border-radius:6px; background:transparent;color:var(--ink-2);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;white-space:nowrap} .font-scale button:hover,.seg-control button:hover{color:var(--ink)} .seg-control [aria-pressed="true"]{background:var(--surface);border-color:var(--line);color:var(--ink)} /* Активный сегмент — по атрибуту на , а не по aria-pressed: атрибут штампуется до отрисовки, JS — позже. */ html:not([data-font-scale]) .font-scale [data-font-scale="md"],html[data-font-scale="lg"] .font-scale [data-font-scale="lg"], html[data-font-scale="xl"] .font-scale [data-font-scale="xl"]{background:var(--surface);border-color:var(--line);color:var(--ink)} /* Тумблер темы. Подпись и положение бегунка выбирает CSS по тем же условиям, что и токены темы, — поэтому при загрузке ничего не мигает; JS только ставит aria-checked. */ .theme-switch{--ts-shift:68px;position:relative;display:inline-flex;align-items:center;justify-content:center; width:96px;height:28px;padding:0 10px 0 31px;border:0;border-radius:999px;background:var(--track); color:var(--ink-2);font-size:12px;font-weight:600;cursor:pointer;transition:background-color .16s ease,color .16s ease} .theme-switch:hover{color:var(--ink)} .theme-switch-knob{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%; background:var(--surface);box-shadow:0 1px 3px rgba(14,19,23,.25);transition:transform .2s ease,background-color .16s ease} .theme-switch .ts-dark{display:none} /* Тёмное состояние — дважды, как и токены: явный выбор и системная настройка в один селектор не сводятся. */ :root[data-theme="dark"] .theme-switch{padding:0 31px 0 10px;background:var(--line-strong);color:var(--ink)} :root[data-theme="dark"] .theme-switch-knob{transform:translateX(var(--ts-shift));background:var(--ink)} :root[data-theme="dark"] .theme-switch .ts-light{display:none} :root[data-theme="dark"] .theme-switch .ts-dark{display:inline} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-switch{padding:0 31px 0 10px;background:var(--line-strong);color:var(--ink)} :root:not([data-theme="light"]) .theme-switch-knob{transform:translateX(var(--ts-shift));background:var(--ink)} :root:not([data-theme="light"]) .theme-switch .ts-light{display:none} :root:not([data-theme="light"]) .theme-switch .ts-dark{display:inline} } /* Меню пользователя: кнопка в шапке и выпадающая карточка — «Профиль», «Система», размер шрифта, тема и «Выйти». */ .user-menu{position:relative} .user-menu-btn{display:flex;align-items:center;gap:9px;height:42px;max-width:260px;padding:0 8px 0 4px; border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);text-align:left;cursor:pointer; transition:border-color .16s ease,box-shadow .16s ease} .user-menu-btn:hover,.user-menu.open .user-menu-btn{border-color:var(--accent)} .user-menu.open .user-menu-btn{box-shadow:0 0 0 3px var(--accent-soft)} .user-avatar{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%; background:var(--accent);color:var(--accent-ink)} .user-avatar.lg{flex-basis:44px;width:44px;height:44px} .user-avatar.xl{flex-basis:60px;width:60px;height:60px} .user-menu-copy{display:grid;gap:1px;min-width:0;line-height:1.2} .user-menu-copy strong{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-menu-copy span{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .user-menu-chevron{display:grid;place-items:center;color:var(--ink-3);transform:rotate(90deg);transition:transform .16s ease} .user-menu.open .user-menu-chevron{transform:rotate(-90deg)} .user-menu-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:75;width:300px;max-width:calc(100vw - 24px); overflow:hidden;white-space:normal;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:0 12px 28px rgba(14,19,23,.12)} .user-menu-card{display:flex;align-items:center;gap:12px;padding:16px} .user-menu-card>div{display:grid;gap:3px;min-width:0} .user-menu-card strong{font-size:14px;font-weight:700;color:var(--ink);overflow-wrap:anywhere} .user-menu-card span{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere} .user-menu-logout{margin:0} .user-menu-item{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;height:44px;padding:0 16px; border:0;border-top:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--ink); font-size:13.5px;font-weight:600;text-decoration:none;cursor:pointer} .user-menu-item:hover{background:var(--surface-2);color:var(--ink)} .user-menu-item.danger,.user-menu-item.danger:hover{color:var(--danger)} .user-menu-foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px; border-top:1px solid var(--line);background:var(--surface-2);font-size:11px;color:var(--ink-3)} .content{padding:18px 20px 28px;max-width:none} /* A+ / A++ увеличивают только рабочую область: в шапке и меню — 100vh и sticky, их zoom ломает. Экран СЦ не участвует. JS, который ставит размеры по getBoundingClientRect() внутри .content, делит на currentCSSZoom. */ html[data-font-scale="lg"] body:not(.page-mechanics-live) .content{zoom:1.125} html[data-font-scale="xl"] body:not(.page-mechanics-live) .content{zoom:1.25} /* --- Шапка страницы ------------------------------------------------------ */ .page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px} .page-head h2{margin:0 0 3px;font-size:23px;font-weight:700;letter-spacing:-.025em} .page-head p{margin:0;font-size:12.5px;color:var(--ink-2)} /* --- Карточки ------------------------------------------------------------ */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:none;margin-bottom:14px} .panel-head{min-height:46px;display:flex;align-items:center;gap:9px;padding:0 15px; border-bottom:1px solid var(--line)} .panel-head h3{margin:0;font-size:13.5px;font-weight:700} .panel-head p{margin:0;font-size:12px;color:var(--ink-2)} /* --- Таблицы ------------------------------------------------------------- */ .table-wrap{overflow:auto} table{width:100%;border-collapse:collapse;background:var(--surface)} th{height:36px;padding:0 15px;font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);background:var(--surface-2); border-bottom:1px solid var(--line);text-align:left;position:sticky;top:0;z-index:1} td{height:var(--row-h);padding:8px 15px;font-size:12.5px;color:var(--ink); border-bottom:1px solid var(--line);text-align:left} tbody tr:hover{background:var(--surface-2)} tbody tr:last-child td{border-bottom:0} td small{display:block;margin-top:2px;color:var(--ink-3);font-size:11px} .table-link{font-family:var(--num);font-weight:600;color:var(--link)} .table-sub{color:var(--ink-3);font-size:11px} .table-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 15px;height:44px; border-top:1px solid var(--line);font-family:var(--num);font-size:11.5px;color:var(--ink-3)} .panel>.table-foot:only-of-type{border-top:0} .cell-id{font-weight:700} .dim{color:var(--ink-3)} .mono.is-bad{color:var(--danger)} td.num-cell,th.num-cell{text-align:right} td .mono,td .cell-id{font-family:var(--num);font-variant-numeric:tabular-nums} /* Пагинация списков — подвал собирает pager_foot() в helpers.php, размер страницы меняет app.js. */ .pager-foot{height:auto;min-height:44px;padding:6px 15px} .pager-foot>span{margin-right:auto} .pager-nav{display:flex;align-items:center;gap:2px} .pager-nav a,.pager-nav span{min-width:30px;height:30px;padding:0 8px;display:inline-flex;align-items:center; justify-content:center;border:1px solid transparent;border-radius:8px;color:var(--ink-2);font-size:12px;font-weight:600} .pager-nav a:hover{border-color:var(--line-strong);color:var(--ink)} .pager-nav .active{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:700} .pager-nav .pager-step{font-size:16px} .pager-nav [aria-disabled]{opacity:.35} .pager-nav .pager-gap{min-width:18px;padding:0;color:var(--ink-3)} .pager-size{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:11.5px;font-weight:500; color:var(--ink-3);white-space:nowrap} .pager-size select{width:auto;height:30px;min-height:30px;padding:0 8px;font-family:var(--num);font-size:12px} /* --- Список на всю высоту (.table-fit) ------------------------------------ Панель главной таблицы с классом .table-fit — прямой потомок .content — занимает остаток экрана: шапка страницы и фильтры стоят наверху, строки прокручиваются внутри панели, заголовок таблицы (th уже sticky) и подвал с пагинацией видны всегда. Включается через :has(): без него страница прокручивается целиком. Высоту даёт flex от .main, а не vh внутри .content — на .content действует zoom размера шрифта. Сжимается только список от 8 видимых строк и не ниже 300px: 8 строк по 42px с заголовком выше минимума, поэтому короткий список держит свою высоту, а не тянет пустую панель. Не помещается — прокручивается .content. Узкий или низкий экран и печать — обычная прокрутка документа. */ @media screen and (min-width:901px) and (min-height:560px){ .main:has(>.content>.table-fit){height:100vh;display:flex;flex-direction:column} .main:has(>.content>.table-fit)>.topbar{flex:none} .main:has(>.content>.table-fit)>.content{flex:1 1 0;min-height:0;display:flex;flex-direction:column; overflow:auto;padding-bottom:18px} .content:has(>.table-fit)>*{flex:none} .content:has(>.table-fit)>.alert{margin:0 0 14px} .content>.table-fit{margin-bottom:0} .content>.table-fit:has(tbody>tr:nth-child(8 of :not([hidden]))){flex:0 1 auto;min-height:300px} /* Панель с заголовком: прокручивается вложенный .table-wrap. */ .content>.table-fit:not(.table-wrap){display:flex;flex-direction:column;overflow:hidden} .table-fit:not(.table-wrap)>*{flex:none} .table-fit:not(.table-wrap)>.table-wrap{flex:0 1 auto;min-height:0} /* Панель сама прокручивается: подвал внутри неё прилипает к низу и к левому краю при прокрутке вбок. */ .table-fit.table-wrap>.table-foot{position:sticky;bottom:0;left:0;z-index:2;background:var(--surface); border-top:1px solid var(--line)} } /* --- Кнопки -------------------------------------------------------------- */ .btn{height:34px;display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:0 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface); color:var(--ink-2);font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer} .btn:hover{border-color:var(--line-strong);color:var(--ink)} .btn.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700} .btn.primary:hover{filter:brightness(1.07)} .btn.secondary{background:var(--surface);color:var(--ink-2)} .btn.success{border-color:transparent;background:var(--ok-bg);color:var(--ok)} .btn.danger{border-color:transparent;background:var(--danger-bg);color:var(--danger)} .btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)} .btn.big{height:44px;padding:0 20px;font-size:14px} .btn:disabled{opacity:.5;cursor:not-allowed} /* --- Формы --------------------------------------------------------------- */ label{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--ink-2)} input,select,textarea{border:1px solid var(--line);border-radius:9px;background:var(--surface); color:var(--ink);padding:9px 11px;font-size:13px;outline:none} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} input::placeholder,textarea::placeholder{color:var(--ink-3)} small{font-size:11px;color:var(--ink-3);font-weight:500} .filter-bar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap} .repair-reassign{display:flex;align-items:center;gap:6px;min-width:270px}.repair-reassign select{min-width:170px;height:34px;padding:6px 8px}.repair-reassign .btn{height:34px;padding:0 10px} @media(max-width:700px){.repair-reassign{min-width:0;flex-wrap:wrap}.repair-reassign select{min-width:0;flex:1 1 180px}} /* --- Сообщения и пустые состояния ---------------------------------------- */ .alert{border-radius:var(--radius);padding:11px 13px;margin:12px 0;font-size:12.5px;font-weight:600} .alert.error{background:var(--danger-bg);color:var(--danger)} .alert.success{background:var(--ok-bg);color:var(--ok)} .empty{padding:20px;border:1px dashed var(--line-strong);border-radius:var(--radius); background:var(--surface-2);color:var(--ink-3);text-align:center;font-size:12.5px} .empty.small{padding:10px;border:0;background:transparent} /* --- Чипы статусов ------------------------------------------------------- Семь семантик прототипа. Модификаторы — значения enum из базы, поэтому имена менять нельзя: их подставляют и PHP, и JS-модули живых экранов. */ .status,.class-pill,.criticality-badge,.expected-status{display:inline-block;padding:3px 9px; border-radius:99px;font-size:11px;font-weight:700;white-space:nowrap; background:var(--surface-2);color:var(--ink-3)} .status.assigned,.status.pending{background:var(--s-blue-bg);color:var(--s-blue-fg)} .status.in_progress{background:var(--s-lime-bg);color:var(--s-lime-fg)} .status.waiting_part,.status.paused{background:var(--s-amber-bg);color:var(--s-amber-fg)} .status.awaiting_control{background:var(--s-violet-bg);color:var(--s-violet-fg)} .status.completed,.status.approved{background:var(--ok-bg);color:var(--ok)} .status.returned,.status.rejected{background:var(--danger-bg);color:var(--danger)} .status.cancelled{background:var(--surface-2);color:var(--ink-3)} /* Отдельные семантики для нестатусных значений: «Активен/Отключён», «ОК/Ошибка». */ .status.st-ok{background:var(--ok-bg);color:var(--ok)} .status.st-bad{background:var(--danger-bg);color:var(--danger)} .status.st-grey{background:var(--surface-2);color:var(--ink-3)} .status.st-live{background:var(--s-lime-bg);color:var(--s-lime-fg)} /* Состояние складской позиции. Коды приходят из stock_state(): это не enum базы, поэтому взяли префикс — .status.low стояло бы вплотную к .criticality-badge.low. */ .status.stock-ok{background:var(--ok-bg);color:var(--ok)} .status.stock-low{background:var(--s-amber-bg);color:var(--s-amber-fg)} .status.stock-out{background:var(--danger-bg);color:var(--danger)} .class-pill.low{background:var(--s-lime-bg);color:var(--s-lime-fg)} .class-pill.medium{background:var(--s-amber-bg);color:var(--s-amber-fg)} .class-pill.hard{background:var(--danger-bg);color:var(--danger)} .criticality-badge.low{background:var(--surface-2);color:var(--ink-3)} .criticality-badge.med{background:var(--s-amber-bg);color:var(--s-amber-fg)} .criticality-badge.high{background:var(--danger-bg);color:var(--danger)} .count-badge{font-family:var(--num);font-size:11px;font-weight:700;padding:2px 6px; border-radius:6px;background:var(--surface-2);color:var(--ink-2)} .readonly-badge{background:var(--surface-2);color:var(--ink-3);border-radius:99px; padding:3px 9px;font-size:11px;font-weight:700} /* --- Навигация по разделам страницы -------------------------------------- */ /* Отдельный примитив, а не .tabs: в 0.15.0 пилюли стали фильтрами со счётчиками, и ряд разделов рядом с рядом фильтров читался бы как второй набор фильтров. */ .section-nav{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:14px; border-bottom:1px solid var(--line)} .section-nav a{height:34px;display:inline-flex;align-items:center;padding:0 12px; margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--ink-2); font-size:12.5px;font-weight:600;white-space:nowrap} .section-nav a:hover{color:var(--ink)} .section-nav a.active{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)} /* --- Пилюли фильтров ----------------------------------------------------- */ .tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px;border:0} .tabs a{padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface); color:var(--ink-2);font-size:12.5px;font-weight:600;white-space:nowrap} .tabs a:hover{border-color:var(--line-strong);color:var(--ink)} .tabs a.active{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:700} /* --- Диалоги и уведомления ----------------------------------------------- */ .yoto-dialog-card,.modal-card{background:var(--surface);color:var(--ink); border:1px solid var(--line);border-radius:var(--radius-lg)} .toast{background:var(--ink);color:var(--surface);border-radius:var(--radius)} .toast-success{background:var(--ok)} .toast-error{background:var(--danger)} /* --- Тёмные поверхности, ранее заданные прямыми цветами ------------------- */ .timer-wrap{background:var(--nav);color:#fff} .timer-wrap strong{color:var(--accent)} .scooter-cost-banner{background:var(--nav);color:#fff} .scooter-cost-banner strong{color:var(--accent)} /* --- Экран входа --------------------------------------------------------- Тёмный в обеих темах — в прототипе это самостоятельная сплит-панель, она не участвует в переключении. */ .login-body{min-height:100vh;display:grid;place-items:center;padding:40px; background:#0B0F12;background-image:radial-gradient(#1B2329 1px,transparent 1px); background-size:22px 22px;font-family:var(--sans)} .login-card{width:min(1000px,100%);display:grid;grid-template-columns:1.1fr 1fr; border:1px solid #1E262C;border-radius:18px;overflow:hidden;background:#0E1317; padding:0;box-shadow:none} .login-aside{padding:44px;display:flex;flex-direction:column;justify-content:space-between; gap:48px;border-right:1px solid #1E262C} .login-brand{display:flex;align-items:center;gap:14px} .login-brand img{display:block;width:auto;height:36px} .login-brand span{font-size:34px;font-weight:800;letter-spacing:.01em;color:#fff;line-height:1} .login-facts{display:flex;gap:22px;flex-wrap:wrap;padding-top:14px;border-top:1px solid #1E262C} .login-facts div{display:grid;gap:4px} .login-facts b{font-family:var(--num);font-size:22px;font-weight:600;color:#fff} .login-facts span{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6B757D} .login-form{padding:44px 40px;display:flex;flex-direction:column;gap:20px;background:#12181C} .login-form h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#fff} .login-form p.login-sub{margin:6px 0 0;font-size:13px;color:#8B959D} .login-form form{display:grid;gap:16px} .login-form label{gap:7px;font-size:12px;font-weight:600;color:#9AA5AE} .login-form input{height:44px;padding:0 14px;border-radius:10px;border:1px solid #2A343A; background:#0B0F12;color:#fff;font-size:14px} .login-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .login-form .btn{height:46px;border-radius:10px;font-size:14px;font-weight:700} .login-node{margin-top:auto;font-family:var(--num);font-size:11px;color:#5C666E} .login-form .alert.error{background:rgba(255,123,123,.11);color:#FF7B7B;margin:0} @media(max-width:820px){ .login-card{grid-template-columns:1fr} .login-aside{display:none} } /* --- Индикатор связи ----------------------------------------------------- realtime.js пишет сюда data-state, подпись, возраст данных в [data-live-age] и класс is-refreshing; другого DOM он не трогает. */ @keyframes yoto-ping{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}} .live-badge{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 13px; border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.06em; background:var(--nav);color:#fff;flex:0 0 auto} .live-badge i{position:relative;width:7px;height:7px;flex:0 0 7px;border-radius:99px; background:var(--accent);box-shadow:none} .live-badge i::after{content:"";position:absolute;inset:0;border-radius:99px; background:var(--accent);animation:yoto-ping 2.4s ease-out infinite} .live-badge .live-label{white-space:nowrap} .live-badge small{font-family:var(--num);font-size:11px;font-weight:500;color:#9AA5AE;letter-spacing:0} .live-badge[data-state="live"]{background:var(--nav);color:#fff} .live-badge[data-state="connecting"]{background:var(--nav);color:#fff} .live-badge[data-state="connecting"] i{background:var(--line-strong)} .live-badge[data-state="connecting"] i::after{animation:none;opacity:0} .live-badge[data-state="reconnecting"],.live-badge[data-state="fallback"]{background:var(--s-amber-bg);color:var(--s-amber-fg)} .live-badge[data-state="reconnecting"] i,.live-badge[data-state="fallback"] i{background:var(--s-amber-fg)} .live-badge[data-state="stale"]{background:var(--danger-bg);color:var(--danger)} .live-badge[data-state="stale"] i{background:var(--danger)} .live-badge[data-state="reconnecting"] i::after,.live-badge[data-state="fallback"] i::after,.live-badge[data-state="stale"] i::after{animation:none;opacity:0} .live-badge[data-state="reconnecting"] small,.live-badge[data-state="fallback"] small,.live-badge[data-state="stale"] small{color:inherit} /* На рабочих экранах бейдж — кнопка: клик обновляет данные сразу. На TV-доске .tv-live остаётся span. */ button.live-badge{border:0;cursor:pointer;transition:background-color .18s ease,color .18s ease,box-shadow .16s ease} button.live-badge:hover{box-shadow:0 0 0 3px var(--accent-soft)} button.live-badge.is-refreshing i::after{animation:yoto-ping .8s ease-out infinite;opacity:1} /* --- Рабочий стол -------------------------------------------------------- Плитки склеены в одну полосу общими границами: отрицательные поля прячут двойную линию на стыке. Точка у подписи красится по позиции — модификатора на плитку в разметке нет, и заводить его ради цвета незачем. */ .manager-kpi-grid,.stats-grid{display:flex;flex-wrap:wrap;gap:0;margin-bottom:14px; background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} .manager-kpi,.stats-grid .stat{flex:1 1 158px;min-width:150px;margin:-1px 0 0 -1px; padding:13px 15px 14px;display:flex;flex-direction:column;gap:7px;background:var(--surface); border-left:1px solid var(--line);border-top:1px solid var(--line);border-radius:0;color:inherit} a.manager-kpi:hover{background:var(--surface-2)} .manager-kpi>span:first-child,.stats-grid .stat>span:first-child{display:flex;align-items:center;gap:6px;font-size:10.5px; font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap} .manager-kpi>span:first-child::before,.stats-grid .stat>span:first-child::before{content:"";width:6px;height:6px;flex:0 0 6px; border-radius:99px;background:var(--line-strong)} .manager-kpi>strong,.stats-grid .stat strong{font-family:var(--num);font-size:32px;font-weight:600; line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:0;color:var(--ink)} .manager-kpi:nth-child(1)>span:first-child::before,.st-workspace-stats .stat:nth-child(1)>span:first-child::before{background:var(--s-blue-fg)} .manager-kpi:nth-child(2)>span:first-child::before,.st-workspace-stats .stat:nth-child(2)>span:first-child::before{background:var(--accent)} .manager-kpi:nth-child(3)>span:first-child::before,.st-workspace-stats .stat:nth-child(3)>span:first-child::before{background:var(--s-amber-fg)} .manager-kpi:nth-child(4)>span:first-child::before,.st-workspace-stats .stat:nth-child(4)>span:first-child::before{background:var(--s-violet-fg)} .manager-kpi:nth-child(5)>span:first-child::before,.st-workspace-stats .stat:nth-child(5)>span:first-child::before{background:var(--ok)} .manager-kpi:nth-child(6)>span:first-child::before,.st-workspace-stats .stat:nth-child(6)>span:first-child::before{background:var(--danger)} /* Третья строка плитки: подсказка, ссылка или спарклайн — как в макете. */ .kpi-hint{min-height:14px;font-size:11.5px;color:var(--ink-3);font-weight:500} .kpi-link{color:var(--link);font-weight:600} .kpi-spark{display:flex;align-items:flex-end;gap:2px;height:14px} .kpi-spark i{width:4px;border-radius:1px;background:var(--line-strong)} .kpi-spark i.now{background:var(--ok)} /* Дефицит подсвечивается только когда он есть. */ .manager-kpi.kpi-warn.is-on{background:var(--danger-bg)} .manager-kpi.kpi-warn.is-on:hover{background:var(--danger-bg);filter:brightness(.98)} .manager-kpi.kpi-warn.is-on>strong,.manager-kpi.kpi-warn.is-on .kpi-link{color:var(--danger)} .dashboard-metrics-strip{display:flex;flex-wrap:wrap;gap:0;margin-bottom:14px;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} .dashboard-metrics-strip>div{flex:1 1 180px;min-width:160px;margin:-1px 0 0 -1px;padding:12px 15px; display:grid;gap:6px;align-content:start;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line)} .dashboard-metrics-strip>div>span{font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dashboard-metrics-strip strong{font-family:var(--num);font-size:20px;font-weight:600;color:var(--ink);line-height:1} .dashboard-metrics-strip strong.is-bad{color:var(--danger)} .metric-with-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .metric-bar{flex:1 1 70px;min-width:60px;max-width:120px;height:6px;border-radius:99px; background:var(--track);overflow:hidden} .metric-bar i{display:block;height:100%;border-radius:99px;background:var(--accent)} .head-stat{font-family:var(--num);font-size:12px;font-weight:600;color:var(--ink-3);white-space:nowrap} .panel-head .table-link{margin-left:auto} .count-badge.is-bad{background:var(--danger-bg);color:var(--danger)} .dashboard-three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px} .dashboard-three-col>.panel{margin-bottom:0} @media(max-width:1250px){.dashboard-three-col{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.dashboard-three-col{grid-template-columns:minmax(0,1fr)}} /* Списки дашборда: высоту на восемь строк задаёт manager-dashboard.js, остальное — прокруткой. Скругление — чтобы подложка строк не вылезала за нижние углы панели. */ .dash-scroll{overflow-y:auto;border-radius:0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px)} /* Требуют внимания: полоса слева и подложка — как карточка просрочки в макете. */ .attention-list{display:grid} .attention-row{display:flex;align-items:center;gap:14px;padding:11px 15px;background:var(--surface); border-top:1px solid var(--line);border-left:3px solid transparent;color:inherit} .attention-row:first-child{border-top:0} .attention-row:hover{background:var(--surface-2)} .attention-row>div:first-child{display:grid;gap:3px;min-width:0} .attention-row b{font-family:var(--num);font-size:13px;font-weight:700} .attention-row span{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .attention-reason{margin-left:auto;display:grid;justify-items:end;gap:3px;text-align:right;flex:0 0 auto} .attention-reason strong{font-size:11.5px;font-weight:600} .attention-reason small{font-family:var(--num);font-size:13px;font-weight:700;color:var(--ink)} .attention-row.severity-3,.attention-row.severity-4{border-left-color:var(--danger);background:var(--danger-bg)} .attention-row.severity-3 .attention-reason strong,.attention-row.severity-4 .attention-reason strong{color:var(--danger)} .attention-row.severity-2{border-left-color:var(--s-amber-fg)} .attention-row.severity-2 .attention-reason strong{color:var(--s-amber-fg)} /* Пустое состояние с галочкой — из макета: панель не выглядит сломанной, когда всё в норме. */ .empty.compact{padding:22px 18px;border:0;background:transparent;color:var(--ink-2);line-height:1.5} .empty.compact::before{content:"✓";display:grid;place-items:center;width:38px;height:38px; margin:0 auto 10px;border:1px dashed var(--line-strong);border-radius:11px; color:var(--ink-3);font-size:16px} /* KPI сегодня: номер строки — счётчик CSS, в разметке его нет. */ .dashboard-kpi-list{display:grid;counter-reset:kpirow} .dashboard-kpi-row{display:flex;align-items:center;gap:12px;padding:0 15px;min-height:var(--row-h); border-top:1px solid var(--line);color:inherit;counter-increment:kpirow} .dashboard-kpi-row:first-child{border-top:0} .dashboard-kpi-row:hover{background:var(--surface-2)} .dashboard-kpi-row::before{content:counter(kpirow,decimal-leading-zero);font-family:var(--num); font-size:11px;font-weight:600;color:var(--ink-3);flex:0 0 auto} .dashboard-kpi-name{flex:0 1 auto;font-size:12.5px;font-weight:600;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .dashboard-kpi-progress{flex:1 1 40px;min-width:36px;height:6px;border-radius:99px; background:var(--track);overflow:hidden} .dashboard-kpi-progress i{display:block;height:100%;border-radius:99px;background:var(--accent)} .dashboard-kpi-row>strong{font-family:var(--num);font-size:12px;font-weight:600; color:var(--ink-3);white-space:nowrap;flex:0 0 auto} .dashboard-kpi-row>em{font-family:var(--num);font-style:normal;font-size:11px;font-weight:700; color:var(--ok);flex:0 0 auto;min-width:0} /* Механики: список строк, а не сетка карточек. */ .manager-mechanic-grid{display:grid} .manager-mechanic-card{display:grid;gap:7px;padding:11px 15px;border-top:1px solid var(--line); background:transparent;border-radius:0} .manager-mechanic-card:first-child{border-top:0} .manager-mechanic-card:hover{background:var(--surface-2)} .mechanic-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0} .mechanic-name h4{margin:0;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mechanic-name h4::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:99px; background:var(--line-strong)} .manager-mechanic-card:has(.working-dot) .mechanic-name h4::before{background:var(--accent)} .mechanic-name>span{margin-left:auto;font-size:11.5px;color:var(--ink-3);white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .mechanic-name>span.working-dot{color:var(--s-lime-fg)!important;font-weight:600} .mechanic-load-bar{height:3px;border-radius:99px;background:var(--track);overflow:hidden} .mechanic-load-bar i{display:block;height:100%;border-radius:99px;background:var(--line-strong)} .manager-mechanic-card:has(.working-dot) .mechanic-load-bar i{background:var(--accent)} .mechanic-numbers{display:flex;flex-wrap:wrap;gap:4px 14px} .mechanic-numbers span{display:flex;align-items:baseline;gap:5px;font-size:11px;color:var(--ink-3); background:transparent;padding:0;border-radius:0;white-space:nowrap} .mechanic-numbers b{font-family:var(--num);font-size:12px;font-weight:700;color:var(--ink-3)} .manager-mechanic-card:has(.working-dot) .mechanic-numbers b{color:var(--ink)} .low-stock-list{display:grid} .stock-short-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 15px; min-height:var(--row-h);background:var(--surface);border-top:1px solid var(--line);color:inherit;font-size:12.5px} .stock-short-row:first-child{border-top:0} .stock-short-row:hover{background:var(--surface-2)} .stock-short-row>div{display:grid;gap:2px;min-width:0} .stock-short-row b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stock-short-row span{font-size:11px;color:var(--ink-3)} .stock-short-row>div:last-child{justify-items:end;text-align:right;flex:0 0 auto} .stock-short-row strong{font-family:var(--num);font-size:14px;font-weight:700} .stock-short-row small{font-family:var(--num);font-size:10.5px;color:var(--ink-3)} .stock-short-row.empty-stock{background:var(--danger-bg)} .stock-short-row.empty-stock strong{color:var(--danger)} .warehouse-summary{display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--line)} .warehouse-summary>div{flex:1 1 120px;padding:11px 15px;display:grid;gap:4px;border-left:1px solid var(--line)} .warehouse-summary>div:first-child{border-left:0} .warehouse-summary span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .warehouse-summary strong{font-family:var(--num);font-size:18px;font-weight:600} /* Столбики «Завершено за 7 дней» — блок вернулся в вёрстку вместе с KI-10. */ .mini-bars{display:flex;align-items:flex-end;gap:8px;padding:15px;height:160px} .mini-bar-item{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end; align-items:center;gap:6px;height:100%} .mini-bar-value{font-family:var(--num);font-size:12px;font-weight:700;color:var(--ink)} .mini-bar-track{width:100%;flex:1 1 auto;display:flex;align-items:flex-end; background:var(--track);border-radius:6px;overflow:hidden} .mini-bar-track i{display:block;width:100%;background:var(--accent);border-radius:6px} .mini-bar-item>span{font-family:var(--num);font-size:10.5px;color:var(--ink-3);white-space:nowrap;min-height:14px} /* Вкладки вида и периода диаграммы «Завершено». Цвета серий — токены --chart-*: цвета бейджей классов (лайм / янтарь / красный) при дальтонизме не различаются, для разбивки они не годятся. */ .chart-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px; padding:6px 15px 0} .chart-views{display:flex;flex-wrap:wrap;gap:2px} .chart-views button{height:32px;padding:0 9px;border:0;border-bottom:2px solid transparent;border-radius:0; background:none;color:var(--ink-2);font:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap} .chart-views button:hover{color:var(--ink)} .chart-views button.active{color:var(--ink);font-weight:700;border-bottom-color:var(--accent)} .chart-periods{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .chart-periods .chip{padding:5px 10px;font-size:12px} .chart-custom{display:flex;flex-wrap:wrap;gap:6px} .chart-custom[hidden]{display:none} .chart-custom label{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink-3)} .chart-custom input{min-height:30px;padding:3px 7px;font-size:12px} .completed-chart-wrap{position:relative} .completed-chart{transition:opacity .16s ease} .completed-chart.is-loading{opacity:.45} .mini-bars.is-dense{gap:2px} .mini-bars.is-dense .mini-bar-value{visibility:hidden} .mini-bars.is-dense .mini-bar-track,.mini-bars.is-dense .mini-bar-track i{border-radius:3px} .mini-bar-item{outline:0;cursor:default} .mini-bar-item.is-hover .mini-bar-track{box-shadow:0 0 0 2px var(--line-strong)} .mini-bar-item:focus-visible .mini-bar-track{box-shadow:0 0 0 2px var(--accent)} .mini-bar-track.is-stack{background:transparent} .mini-bar-track .mini-bar-stack{display:flex;flex-direction:column-reverse;gap:2px;background:none; border-radius:4px 4px 0 0;overflow:hidden} .mini-bar-stack b{display:block;min-height:2px} .chart-s1{background:var(--chart-1)}.chart-s2{background:var(--chart-2)}.chart-s3{background:var(--chart-3)} .chart-s4{background:var(--chart-4)}.chart-s5{background:var(--chart-5)}.chart-s-other{background:var(--line-strong)} .chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:0 15px 13px;font-size:11.5px;color:var(--ink-2)} .chart-legend span{display:inline-flex;align-items:center;gap:6px} .chart-legend i{width:10px;height:10px;border-radius:3px} .chart-legend b{font-family:var(--num);font-weight:700;color:var(--ink)} .completed-line{padding:6px 15px 0} .completed-line svg{display:block;max-width:100%;height:auto} .chart-line{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round} .chart-area{fill:var(--chart-1);fill-opacity:.1} .chart-dot{fill:var(--chart-1);stroke:var(--surface);stroke-width:2} .chart-value{fill:var(--ink);font-size:11px;font-weight:700;font-family:var(--num)} .chart-cross{stroke:var(--line-strong);stroke-width:1;opacity:0} .chart-cross.is-on{opacity:1} .chart-hit{fill:transparent;outline:0} .chart-hit:focus-visible{fill:var(--accent-soft)} .chart-tip{position:absolute;z-index:5;min-width:120px;max-width:240px;padding:8px 10px;pointer-events:none; background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius); box-shadow:0 6px 20px rgba(8,12,16,.12);font-size:11.5px;color:var(--ink-2)} .chart-tip[hidden]{display:none} .chart-tip-date{font-size:11px;color:var(--ink-3);margin-bottom:4px} .chart-tip-main{display:flex;align-items:baseline;gap:6px} .chart-tip-main b,.chart-tip-row b{font-family:var(--num);font-weight:700;color:var(--ink)} .chart-tip-main b{font-size:15px} .chart-tip-row{display:flex;align-items:center;gap:6px;margin-top:3px} .chart-tip-row i{flex:0 0 auto;width:10px;height:2px;border-radius:1px} .chart-tip-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .class-performance{display:grid} .class-performance-card{display:flex;flex-wrap:wrap;gap:10px;padding:11px 15px;border-top:1px solid var(--line)} .class-performance-card:first-child{border-top:0} .class-performance-card>div{flex:1 1 90px;display:grid;gap:3px;min-width:0} .class-performance-card span{font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);white-space:nowrap} .class-performance-card strong{font-family:var(--num);font-size:14px;font-weight:600;color:var(--ink)} .class-performance-card>div:first-child span{color:var(--ink);letter-spacing:0;text-transform:none;font-size:12.5px} /* Рабочий стол СТ СЦ */ .attention-shortcuts{display:grid} .attention-shortcut{display:flex;align-items:center;gap:12px;padding:0 15px;min-height:52px; border-top:1px solid var(--line);color:inherit} .attention-shortcut:first-child{border-top:0} .attention-shortcut:hover{background:var(--surface-2)} .attention-shortcut>span{font-size:12.5px;font-weight:600;color:var(--ink)} .attention-shortcut>strong{margin-left:auto;font-family:var(--num);font-size:20px;font-weight:600} .attention-shortcut>small{flex:0 0 auto;font-size:11px;color:var(--ink-3);width:150px;text-align:right} .big-ratio{padding:18px 15px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .big-ratio strong{font-family:var(--num);font-size:34px;font-weight:600;line-height:1} .big-ratio span{font-size:12.5px;color:var(--ink-2)} .quick-actions{display:flex;flex-wrap:wrap;gap:0;padding:0} .action-tile{flex:1 1 150px;min-height:96px;margin:-1px 0 0 -1px;border:0;border-radius:0; border-left:1px solid var(--line);border-top:1px solid var(--line);background:var(--surface); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ink)} .action-tile:hover{background:var(--surface-2);border-color:var(--line)} .action-tile span{font-size:12.5px;font-weight:600} /* --- Справочники, номенклатура, карточки ---------------------------------- */ .defect-directory{overflow:hidden} .defect-directory-head{min-height:58px;justify-content:space-between} .defect-directory-head>div{display:grid;gap:2px} .defect-directory-note{font-size:11.5px;color:var(--ink-3);text-align:right} .defect-directory-list{display:grid} .defect-category-section{border-top:1px solid var(--line)} .defect-category-section:first-child{border-top:0} .defect-category-row{display:grid;grid-template-columns:minmax(260px,1fr) auto 100px auto;gap:12px;align-items:center;padding:11px 15px;background:var(--surface-2)} .defect-category-main{display:grid;grid-template-columns:8px minmax(0,1fr);gap:10px;align-items:center;min-width:0} .defect-category-main input{font-size:14px;font-weight:700;background:var(--surface)} .defect-category-section.category-disabled .defect-category-main,.defect-edit-row.defect-disabled>input{opacity:.62} .defect-list-head,.defect-edit-row{display:grid;grid-template-columns:minmax(240px,1.4fr) minmax(180px,.8fr) 100px 104px;gap:10px;align-items:center;padding-left:33px;padding-right:15px} .defect-list-head{min-height:32px;background:var(--surface);color:var(--ink-3);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--line)} .defect-edit-list,.category-edit-list{display:grid} .defect-edit-row{padding-top:8px;padding-bottom:8px;border-top:1px solid var(--line)} .defect-edit-row:first-child{border-top:0} .defect-edit-row input,.defect-edit-row select{height:36px;min-height:36px;padding:7px 9px} .defect-edit-row .btn{width:100%} .defect-category-empty{padding:18px 15px 20px;border-top:1px solid var(--line);text-align:left} .category-edit-row{display:grid;grid-template-columns:100px minmax(160px,1.5fr) minmax(140px,1fr) auto;gap:8px;align-items:center;padding:10px 15px;border-top:1px solid var(--line)} .category-edit-row:first-child{border-top:0} @media(max-width:760px){ .defect-category-create,.defect-create-form,.defect-category-row,.defect-edit-row,.category-edit-row{grid-template-columns:minmax(0,1fr)} .defect-list-head{display:none} .defect-category-row{gap:9px} .defect-edit-row{padding:12px 15px} .defect-directory-head{align-items:flex-start;flex-direction:column;padding-top:10px;padding-bottom:10px} .defect-directory-note{text-align:left} } .class-reference{padding:15px} .class-reference .repair-class{cursor:default} .reference-note{margin:0 15px 15px;padding:10px 12px;border-radius:var(--radius); background:var(--surface-2);color:var(--ink-2);font-size:12px} .status-dot{display:inline-block;width:8px;height:8px;border-radius:99px;background:var(--line-strong)} .status-dot.active{background:var(--ok)} .status-dot.inactive{background:var(--line-strong)} .check-line{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-2)} .check-line input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--link)} .row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap} .row-actions.nowrap{flex-wrap:nowrap} .row-actions form{margin:0} .row-save-state{font-size:11px;color:var(--ink-3)} .icon-link{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px; border:1px solid var(--line);background:var(--surface);color:var(--ink-2)} .icon-link:hover{border-color:var(--line-strong);color:var(--ink)} .nomenclature-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 15px; border-bottom:1px solid var(--line)} .nomenclature-head-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .nomenclature-search{min-width:200px} .nomenclature-row.row-dirty{background:var(--s-amber-bg)} .nomenclature-bulk-save.is-dirty{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .criticality-select.low{color:var(--ink-3)} .criticality-select.med{color:var(--s-amber-fg)} .criticality-select.high{color:var(--danger)} .part-profile-grid{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(480px,1.3fr);gap:14px;align-items:start} @media(max-width:1100px){.part-profile-grid{grid-template-columns:minmax(0,1fr)}} .part-photo-card{overflow:hidden} .part-photo-wrap{height:250px;display:grid;place-items:center;background:var(--surface-2); border-bottom:1px solid var(--line)} .part-photo-wrap img{width:100%;height:100%;object-fit:contain;background:var(--surface)} .part-photo-empty{text-align:center;color:var(--ink-3);font-size:22px;font-weight:700} .part-photo-empty small{display:block;font-size:11.5px;margin-top:5px} .part-identity{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:14px} .part-stats .stat strong{font-size:22px} .qty-in{color:var(--ok);font-weight:700} .qty-out{color:var(--danger);font-weight:700} .muted-title{color:var(--ink-3);font-weight:600} .expected-qty{font-family:var(--num);font-weight:600;color:var(--link);white-space:nowrap} .expected-qty:hover{text-decoration:underline} .expected-status.status-received{background:var(--ok-bg);color:var(--ok)} .expected-status.status-in_transit,.expected-status.status-expected{background:var(--s-blue-bg);color:var(--s-blue-fg)} .expected-status.status-partially_received{background:var(--s-amber-bg);color:var(--s-amber-fg)} .expected-status.status-cancelled{background:var(--surface-2);color:var(--ink-3)} .warehouse-head-actions{align-items:flex-end;flex-direction:column} .warehouse-search{position:relative;width:min(330px,42vw)} .warehouse-search>span{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none} .warehouse-search input{height:36px;min-height:36px;padding:7px 9px 7px 34px;background:var(--surface)} .warehouse-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px; border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)} .warehouse-overview-card{display:grid;align-content:start;gap:6px;padding:14px 15px;border-left:1px solid var(--line)} .warehouse-overview-card:first-child{border-left:0} .warehouse-overview-card>span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .warehouse-overview-card>strong{font-family:var(--num);font-size:26px;font-weight:600;line-height:1} .warehouse-overview-card>small{min-height:14px;color:var(--ink-3);font-size:10.5px} .warehouse-period-form{display:grid;grid-template-columns:minmax(120px,1fr) minmax(120px,1fr) auto;align-items:end;gap:8px;margin-top:4px} .warehouse-period-form label{font-size:10px;font-weight:700;color:var(--ink-3)} .warehouse-period-form input{height:34px;min-height:34px;margin-top:3px;padding:6px 8px;background:var(--surface)} .warehouse-period-form .btn{height:34px;min-height:34px;padding:6px 11px} .receipt-row{display:grid;grid-template-columns:minmax(240px,2fr) 140px 170px auto;gap:10px; align-items:end;padding:12px;border-radius:var(--radius);background:var(--surface-2)} @media(max-width:900px){.receipt-row{grid-template-columns:minmax(0,1fr)}} .receipt-items{display:grid;gap:10px;padding:0 15px 8px} .receipt-actions{display:flex;justify-content:space-between;gap:12px;padding:10px 15px 15px;flex-wrap:wrap} .expected-receive-row{display:grid;grid-template-columns:minmax(220px,2fr) 120px 120px;gap:10px; align-items:end;padding:12px;border-radius:var(--radius);background:var(--surface-2)} .expected-receive-row small{display:block;margin-top:3px;color:var(--ink-3);font-size:11px} @media(max-width:900px){.expected-receive-row{grid-template-columns:minmax(0,1fr)}} .section-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .section-actions .muted{font-size:12px;color:var(--ink-3)} .inline-form{display:grid;grid-template-columns:1fr 1.5fr 1fr auto;gap:12px;padding:15px;align-items:end} .inline-simple{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:10px;padding:15px;align-items:end} .panel-form{padding:15px} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .form-grid .full{grid-column:1/-1} @media(max-width:760px){.form-grid,.inline-form{grid-template-columns:minmax(0,1fr)}} @media(max-width:1000px){.warehouse-overview{grid-template-columns:repeat(2,minmax(0,1fr))}.warehouse-overview-card.is-period{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}} @media(max-width:700px){.warehouse-head-actions{align-items:stretch}.warehouse-search{width:100%}.warehouse-overview{grid-template-columns:1fr}.warehouse-overview-card,.warehouse-overview-card.is-period{grid-column:auto;border-left:0;border-top:1px solid var(--line)}.warehouse-overview-card:first-child{border-top:0}.warehouse-period-form{grid-template-columns:1fr 1fr}.warehouse-period-form .btn{grid-column:1/-1}} /* --- Отчёты, KPI, аналитика механика -------------------------------------- */ .report-head{align-items:center} .report-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .report-period-label{font-family:var(--num);font-size:12px;color:var(--ink-3);background:var(--surface)} .report-summary-grid{display:flex;flex-wrap:wrap;gap:0;margin-bottom:14px;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden} .report-summary-card{flex:1 1 170px;min-width:150px;margin:-1px 0 0 -1px;padding:13px 15px 14px; display:grid;gap:7px;align-content:start;background:var(--surface); border-left:1px solid var(--line);border-top:1px solid var(--line)} .report-summary-card span{font-size:10.5px;font-weight:700;letter-spacing:.08em; text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .report-summary-card strong{font-family:var(--num);font-size:26px;font-weight:600;line-height:1;color:var(--ink)} .period-presets{display:flex;gap:7px;flex-wrap:wrap} .period-chip{padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface); color:var(--ink-2);font-size:12.5px;font-weight:600;white-space:nowrap} .period-chip:hover{border-color:var(--line-strong);color:var(--ink)} .period-chip.active{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:700} .custom-period,.report-inline-filter,.kpi-date-filter{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap} .report-filter{padding:15px} .panel-count{font-family:var(--num);font-size:12px;font-weight:600;color:var(--ink-3)} .panel-note{margin:0 15px 15px;padding:10px 12px;border-radius:var(--radius); background:var(--surface-2);color:var(--ink-2);font-size:12px} .compact-report-list{display:grid} .compact-report-list>*{display:flex;align-items:center;gap:10px;padding:0 15px;min-height:var(--row-h); border-top:1px solid var(--line);color:inherit;font-size:12.5px} .compact-report-list>*:first-child{border-top:0} .compact-report-list>a:hover{background:var(--surface-2)} .compact-report-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .compact-report-list strong{margin-left:auto;font-family:var(--num);font-size:12.5px;font-weight:700;flex:0 0 auto} .compact-report-list small{flex:0 0 auto;font-family:var(--num);font-size:11px;color:var(--ink-3);text-align:right} .report-overview-grid,.reports-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} @media(max-width:1100px){.report-overview-grid,.reports-split{grid-template-columns:minmax(0,1fr)}} .report-defects-cell{font-size:11.5px;color:var(--ink-2)} /* KPI */ .kpi-today-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px;margin-bottom:14px} @media(max-width:900px){.kpi-today-grid{grid-template-columns:minmax(0,1fr)}} .kpi-main-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:18px;display:grid;gap:14px} .kpi-main-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .kpi-main-top strong{font-family:var(--num);font-size:38px;font-weight:600;line-height:1} .kpi-main-top span{font-size:12.5px;color:var(--ink-2)} .kpi-main-bottom{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-3)} .kpi-progress,.kpi-cell-progress>div{height:8px;border-radius:99px;background:var(--track);overflow:hidden} .kpi-progress>i,.kpi-cell-progress>div>i{display:block;height:100%;border-radius:99px;background:var(--accent)} .kpi-cell-progress>div{height:6px;min-width:60px} .kpi-class-points{display:flex;gap:8px;flex-wrap:wrap} .kpi-period-strip{display:flex;flex-wrap:wrap;gap:0;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px} .kpi-period-strip>div{flex:1 1 150px;margin:-1px 0 0 -1px;padding:12px 15px;display:grid;gap:5px; background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line)} .kpi-period-strip span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .kpi-period-strip strong{font-family:var(--num);font-size:20px;font-weight:600} .kpi-over{color:var(--ok);font-weight:700} .kpi-rules-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;padding:15px} .metric-good{color:var(--ok);font-weight:700} .metric-bad{color:var(--danger);font-weight:700} /* Аналитика механика */ .mechanic-periods,.mechanic-period-controls,.mechanic-custom-period{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap} .mechanic-periods a{background:var(--surface);color:var(--ink-2)} .mechanic-periods a.active{background:var(--ink);border-color:var(--ink);color:var(--surface)} .mechanic-analytics-summary{display:flex;flex-wrap:wrap;gap:0;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:14px} .mechanic-analytics-summary>div{flex:1 1 160px;margin:-1px 0 0 -1px;padding:13px 15px;display:grid;gap:6px; background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line)} .mechanic-analytics-summary span{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)} .mechanic-analytics-summary strong{font-family:var(--num);font-size:22px;font-weight:600} .mechanic-current-strip{padding:12px 15px;border-radius:var(--radius);background:var(--s-lime-bg); color:var(--s-lime-fg);font-size:12.5px;font-weight:600;margin-bottom:14px} .mechanic-range-caption{font-family:var(--num);font-size:11.5px;color:var(--ink-3)} .mechanic-class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;padding:15px} .mechanic-class-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:13px;display:grid;gap:8px} .mechanic-class-title{font-size:12.5px;font-weight:700} .mechanic-class-values{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)} .mechanic-class-values b{font-family:var(--num);color:var(--ink)} /* SVG-график: координаты считает PHP, здесь только цвета и толщины. */ .performance-panel{margin-bottom:14px} .performance-chart-wrap{padding:15px;overflow-x:auto} .performance-chart{width:100%;min-width:520px;height:auto} .chart-grid{stroke:var(--line);stroke-width:1} .chart-axis-line{stroke:var(--line-strong);stroke-width:1} .chart-axis{fill:var(--ink-3);font-size:10px;font-family:var(--num)} .chart-trend{fill:none;stroke:var(--chart-2);stroke-width:2.5} .chart-point{stroke:var(--surface);stroke-width:2;transition:r .12s ease} .chart-point.within{fill:var(--ok)} .chart-point.overrun{fill:var(--danger)} .performance-chart a:hover .chart-point,.performance-chart a:focus .chart-point{r:7px;outline:none} .performance-chart-meta{display:grid;gap:7px;padding:0 4px 2px;color:var(--ink-3);font-size:11px} .performance-chart-meta p{margin:0} .performance-chart-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--ink-2);font-weight:600} .performance-chart-legend span{display:inline-flex;align-items:center;gap:6px} .chart-key-dot{width:9px;height:9px;border-radius:50%;background:var(--ok)} .chart-key-dot.overrun{background:var(--danger)} .chart-key-line{width:20px;height:0;border-top:3px solid var(--chart-2);border-radius:99px} /* --- Мастер «Новый ремонт» ----------------------------------------------- Номер шага в разметке — просто цифра в , ведущий ноль даёт CSS. Бейдж — flex, а не grid: в grid ::before и цифра становятся двумя ячейками и встают столбиком («0» над «1»). */ .wizard{display:grid;gap:14px} .wizard-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:18px;box-shadow:none} .step-title{display:flex;gap:12px;align-items:flex-start;margin-bottom:15px} .step-title>b{width:28px;height:28px;flex:0 0 28px;display:flex;align-items:center;justify-content:center;border-radius:8px; background:var(--ink);color:var(--surface);font-family:var(--num);font-size:12px;font-weight:700} .step-title>b::before{content:"0"} .step-title h3{margin:0 0 3px;font-size:14px;font-weight:700} .step-title p{margin:0;font-size:12px;color:var(--ink-3)} .tile-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:13px} .chip{padding:7px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface); color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap} .chip:hover{border-color:var(--line-strong);color:var(--ink)} .chip.active{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:700} .product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px} .class-grid,.mechanic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} @media(max-width:900px){.class-grid,.mechanic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .product-card,.repair-class,.mechanic-card{display:flex;flex-direction:column;justify-content:space-between; gap:8px;min-height:82px;padding:13px;text-align:left;cursor:pointer;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);color:var(--ink)} .product-card:hover,.repair-class:hover,.mechanic-card:hover{border-color:var(--line-strong)} .product-card.selected,.repair-class.selected,.mechanic-card.selected{border-color:var(--accent); background:var(--s-lime-bg);box-shadow:0 0 0 3px var(--accent-soft)} .product-card span,.repair-class span,.mechanic-card span{font-size:11.5px;color:var(--ink-3)} .repair-class strong{font-size:16px;font-weight:700} .product-card em{font-style:normal;font-weight:700;color:var(--link)} .product-card:disabled{opacity:.45;cursor:not-allowed} /* Мастер: доступный остаток вместо цены. Позиция с нулевым остатком приглушена и не выбирается. */ .product-card .part-stock{color:var(--ink)} .product-card.out-of-stock{background:var(--surface-2)} .product-card .part-stock-out{padding:2px 7px;border-radius:999px;background:var(--danger-bg);color:var(--danger);font-size:10.5px;font-weight:700;white-space:nowrap} .product-card .part-card-cost{font-family:var(--num);font-weight:700;color:var(--ink-2)} .part-choice:disabled{opacity:.45;cursor:not-allowed} /* Довыдача из нескольких позиций: выбор у механика, список в карточке «Контроля» и в состоянии запроса. */ .part-choice em{font-style:normal;font-weight:700;color:var(--link)} .part-request-selected{display:grid;gap:6px;margin:0 0 12px} .part-request-selected:empty{display:none} .part-request-modal .modal-actions{position:sticky;bottom:0;z-index:1;padding-top:12px;background:var(--surface); border-top:1px solid var(--line);box-shadow:0 20px 0 var(--surface)} /* тень закрывает нижний отступ карточки под кнопками */ .part-request-selected h4{margin:0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .part-request-items{margin:2px 0 0;padding-left:18px;display:grid;gap:2px;font-size:13px;font-weight:700} .requested-items{list-style:none;margin:10px 0;padding:0;display:grid;gap:6px} .requested-items .requested-part{margin:0} .requested-part.short{border-color:var(--danger);background:var(--danger-bg)} .requested-part.short small{color:var(--danger);font-weight:700} .request-short-note{margin:0 0 8px;color:var(--danger);font-size:12px;font-weight:600} .search-box{position:relative;max-width:680px} .search-results{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:10;background:var(--surface); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; box-shadow:0 12px 28px rgba(14,19,23,.12)} .search-result{width:100%;display:grid;gap:3px;padding:11px 13px;border:0; border-bottom:1px solid var(--line);background:var(--surface);color:var(--ink);text-align:left;cursor:pointer} .search-result:last-child{border-bottom:0} .search-result:hover{background:var(--surface-2)} .search-result span{font-size:11.5px;color:var(--ink-3)} .selected-scooter{display:inline-flex;align-items:center;gap:10px;margin-top:12px;padding:10px 13px; border-radius:var(--radius);background:var(--s-lime-bg);border:1px solid var(--accent)} .selected-scooter strong{font-family:var(--num);font-size:17px;font-weight:700} .selected-parts{display:grid;gap:7px;margin-top:12px} .selected-part{display:flex;justify-content:space-between;align-items:center;gap:10px; padding:9px 11px;border-radius:var(--radius);background:var(--surface-2)} .selected-part div{display:flex;align-items:center;gap:8px} .selected-part button{width:28px;height:28px;display:grid;place-items:center;border:1px solid var(--line); background:var(--surface);border-radius:8px;color:var(--ink-2);cursor:pointer} .selected-part button:hover{border-color:var(--line-strong);color:var(--ink)} /* --- Карточки, списки «ключ-значение», таймлайн --------------------------- Используются карточкой ремонта, карточкой самоката и комплектующей. */ .detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start} .detail-grid.single-column{grid-template-columns:minmax(0,1fr)} @media(max-width:1100px){.detail-grid{grid-template-columns:minmax(0,1fr)}} .detail-card{margin-bottom:0} .detail-list{display:grid} .detail-list>div{display:flex;align-items:center;gap:12px;padding:0 15px;min-height:var(--row-h); border-top:1px solid var(--line);font-size:12.5px} .detail-list>div:first-child{border-top:0} .detail-list span{flex:0 0 auto;color:var(--ink-3);font-size:11.5px;font-weight:600} .detail-list b{margin-left:auto;text-align:right;font-weight:600;min-width:0; overflow:hidden;text-overflow:ellipsis} .card-list{display:grid} .card-list>*{padding:11px 15px;border-top:1px solid var(--line);font-size:12.5px} .card-list>*:first-child{border-top:0} /* Таймлайн: точка и вертикальная нить слева, как в макете. */ .timeline{display:grid;padding:15px} .timeline-item{position:relative;display:flex;gap:12px;padding:0 0 16px 0} .timeline-item:last-child{padding-bottom:0} .timeline-item>i{position:relative;flex:0 0 10px;width:10px;height:10px;margin-top:4px; border-radius:99px;background:var(--surface);border:2px solid var(--line-strong)} .timeline-item:first-child>i{background:var(--ok);border-color:var(--ok)} .timeline-item::before{content:"";position:absolute;left:4px;top:16px;bottom:0;width:2px; background:var(--line)} .timeline-item:last-child::before{display:none} .timeline-item>div{display:grid;gap:3px;min-width:0} .timeline-item b{font-size:12.5px;font-weight:700} .timeline-item span{font-size:11.5px;color:var(--ink-3);font-family:var(--num)} .timeline-item p{margin:4px 0 0;padding:8px 10px;border-radius:8px;background:var(--surface-2); font-size:11.5px;color:var(--ink-2)} .timeline.compact .timeline-item{padding-bottom:12px} /* Механики: карточки страницы «Механики» (не киоск — тот живёт на .mechanic-tv-card). */ .mechanics-overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px} .mechanic-overview-card{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-lg);padding:15px;display:grid;gap:11px;overflow:hidden} .mechanic-overview-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent} .mechanic-overview-card.pace-target::before,.mechanic-overview-card.pace-kpi::before{background:var(--ok)} .mechanic-overview-card.pace-near::before{background:var(--accent)} .mechanic-overview-card.pace-attention::before,.mechanic-overview-card.overrun::before{background:var(--danger)} .mechanic-overview-head{display:flex;align-items:center;gap:11px;min-width:0} .mechanic-mini-avatar{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center; border-radius:10px;background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:700} .mechanic-overview-card.pace-target .mechanic-mini-avatar, .mechanic-overview-card.pace-kpi .mechanic-mini-avatar, .mechanic-overview-card.pace-near .mechanic-mini-avatar{background:var(--accent);color:var(--accent-ink)} .mechanic-overview-identity{display:grid;gap:2px;min-width:0} .mechanic-overview-identity h3{margin:0;font-size:13.5px;font-weight:700;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .mechanic-score-line{font-family:var(--num);font-size:11.5px;color:var(--ink-3)} .mechanic-analytics-link{margin-left:auto;flex:0 0 auto;font-size:12px;font-weight:600} .mechanic-overview-progress{height:6px;border-radius:99px;background:var(--track);overflow:hidden} .mechanic-overview-progress i{display:block;height:100%;border-radius:99px;background:var(--accent)} .mechanic-live-current{display:grid;gap:3px;padding:10px 12px;border-radius:var(--radius); background:var(--surface-2);border:1px solid var(--line)} .mechanic-live-current>span{font-size:10px;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--ink-3)} .mechanic-live-current>strong{font-family:var(--num);font-size:14px;font-weight:700;color:var(--ink)} .mechanic-live-current small{font-size:11px;color:var(--ink-3)} .mechanic-live-current.in_progress{background:var(--s-lime-bg);border-color:transparent} .mechanic-live-current.in_progress>span{color:var(--s-lime-fg)} .mechanic-live-current.waiting_part{background:var(--s-amber-bg);border-color:transparent} .mechanic-live-current.waiting_part>span{color:var(--s-amber-fg)} .mechanic-live-current.awaiting_control{background:var(--s-violet-bg);border-color:transparent} .mechanic-live-current.awaiting_control>span{color:var(--s-violet-fg)} .mechanic-live-current.returned{background:var(--danger-bg);border-color:transparent} .mechanic-live-current.returned>span{color:var(--danger)} .mechanic-overview-numbers{display:flex;flex-wrap:wrap;gap:4px 14px} .mechanic-overview-numbers span{display:flex;align-items:baseline;gap:5px;font-size:11px; color:var(--ink-3);background:transparent;padding:0;border-radius:0;white-space:nowrap} .mechanic-overview-numbers b{font-family:var(--num);font-size:12.5px;font-weight:700;color:var(--ink)} /* Доска механика */ .repair-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px} .repair-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:16px;box-shadow:none} .repair-card.active-work{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .repair-card.overrun-card{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)} .repair-no{font-family:var(--num);font-size:12px;font-weight:700;color:var(--ink-3)} .card-status{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);margin-bottom:12px} .repair-card.mechanic .card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .repair-card.mechanic .card-actions .btn{width:100%;min-width:0;padding-left:8px;padding-right:8px} .repair-card.mechanic .card-actions .finish-btn+a{grid-column:1/-1} .control-board .card-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} .control-board .card-actions .btn{width:100%;min-width:0} .control-board .card-actions .control-btn[data-action="return"]{grid-column:1/-1} /* --- Узкие экраны -------------------------------------------------------- */ /* Шапка уступает место поиску: на узких экранах прячется имя в кнопке пользователя. */ @media(max-width:1100px){ .topbar{padding:0 14px} .user-menu-copy{display:none} } @media(max-width:900px){ .content{padding:14px 14px 24px} .page-head h2{font-size:20px} .topbar{padding:0 12px} .nomenclature-head{align-items:flex-start} .report-inline-filter{display:grid} .expected-receive-row{grid-template-columns:minmax(0,1fr)} } @media(max-width:760px){ .inline-simple{grid-template-columns:minmax(0,1fr)} } @media(max-width:700px){ .page-head{align-items:flex-start;gap:12px} .filter-bar,.inline-simple,.custom-period,.report-inline-filter,.kpi-date-filter, .mechanic-custom-period,.mechanic-period-controls{align-items:stretch} .mechanic-custom-period{display:grid} .selected-scooter{display:flex;align-items:flex-start} .attention-reason{margin-left:0;justify-items:start;text-align:left} .attention-row{align-items:flex-start;flex-wrap:wrap} } @media(max-width:680px){ .global-search:not(.open){width:auto} .global-search.open{width:auto;flex:1 1 auto;min-width:0} .global-search-btn{padding-right:14px} .search-kbd{display:none} .topbar{padding:10px 12px} .user-menu-btn{gap:0;padding:0 4px} .user-menu-chevron{display:none} } /* Профиль */ .profile-grid{margin-bottom:14px} .profile-hero{display:flex;align-items:center;gap:14px;padding:16px 15px;border-bottom:1px solid var(--line)} .profile-hero>div{display:grid;gap:3px;min-width:0} .profile-hero strong{font-size:16px;font-weight:700;overflow-wrap:anywhere} .profile-hero span{font-size:12.5px;color:var(--ink-3)} .profile-hint{margin:0;font-size:12px;color:var(--ink-3)} .profile-actions{display:flex;justify-content:flex-end} /* Настройки: подпись с пояснением слева, переключатель справа; на узком экране переключатель уходит под подпись. */ .settings-grid{margin-bottom:14px} .settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px} .settings-row+.settings-row{border-top:1px solid var(--line)} .settings-row>div:first-child{display:grid;gap:3px;min-width:0} .settings-row>div:first-child>strong{font-size:13.5px;font-weight:700;color:var(--ink)} .settings-row>div:first-child>span{font-size:12px;color:var(--ink-3)} .settings-row>:last-child{flex:0 0 auto} @media(max-width:560px){.settings-row{flex-direction:column;align-items:flex-start}} .perm-line.perm-extra small{color:var(--link)} /* Права пользователя (редактор в «Пользователях») и журнал действий. */ .perm-editor{overflow:hidden;scroll-margin-top:calc(var(--topbar-h) + 14px)} .perm-editor .panel-head{min-height:58px;padding-top:10px;padding-bottom:10px} .perm-editor .panel-head>div{display:grid;gap:3px} .perm-editor-body,.perm-editor-empty{padding:14px 15px} .perm-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;gap:12px} .perm-group{display:grid;gap:7px;align-content:start;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} .perm-group h4{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .perm-line{font-weight:500;color:var(--ink)} .perm-line.from-role{color:var(--ink-3)} .perm-line small{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--ink-3);white-space:nowrap} .perm-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:59px;padding:11px 15px;border-top:1px solid var(--line);background:var(--surface-2)} .perm-action-note{min-width:0;font-size:12px} .perm-action-buttons{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-left:auto} @media(max-width:700px){ .perm-editor .panel-head{align-items:flex-start} .perm-groups{grid-template-columns:minmax(0,1fr)} .perm-actions{align-items:stretch;flex-direction:column} .perm-action-buttons{width:100%;display:grid;grid-template-columns:1fr 1fr;margin-left:0} .perm-action-buttons:only-child{grid-template-columns:1fr} .perm-action-buttons .btn:only-child{grid-column:1/-1} .perm-action-buttons .btn{width:100%} } .audit-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;align-items:end;padding:14px 16px} .audit-filters .check-line{align-self:center} .audit-changes{display:grid;gap:3px;font-size:12px} .audit-changes b{font-weight:600;color:var(--ink-2)} .audit-changes del{color:var(--ink-3)} .audit-changes ins{text-decoration:none;font-weight:600;color:var(--ink)} .audit-meta summary{cursor:pointer;font-size:11.5px;color:var(--link)} .audit-meta pre{margin:6px 0 0;max-width:420px;white-space:pre-wrap;word-break:break-word;font-family:var(--num);font-size:11px;color:var(--ink-2)} /* Telegram-отчёт: форма настроек рядом со статусом, журнал отправок ниже. */ .tg-grid{margin-bottom:14px} .tg-hint{margin:0;font-size:12px;color:var(--ink-3)} .tg-warn{margin:0;padding:9px 11px;border-radius:var(--radius);background:var(--s-amber-bg);color:var(--s-amber-fg);font-size:12px;font-weight:600} .tg-days{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;border:0} .tg-days legend{padding:0;margin-bottom:7px;font-size:12px;font-weight:600;color:var(--ink-2)} .tg-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap} .tg-actions .tg-hint{margin-right:auto} .tg-actions .btn{display:inline-flex;align-items:center;gap:7px} .tg-panel-note{padding:11px 15px;border-top:1px solid var(--line)} .tg-sub{display:block;margin-top:3px;font-size:11.5px;color:var(--ink-3)} .tg-sub-inline{font-size:11px;font-weight:500;color:var(--ink-3)} .tg-error{color:var(--danger);max-width:420px;overflow-wrap:anywhere} .tg-template textarea{font-family:var(--num);font-size:12.5px;line-height:1.5;min-height:250px} .tg-template input[data-tg-field]{font-family:var(--num);font-size:12.5px} .tg-vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:-4px} .tg-var{padding:3px 8px;border:1px solid var(--line);border-radius:6px;background:var(--surface-2);color:var(--ink-2);font-family:var(--num);font-size:11.5px;cursor:pointer} .tg-var:hover{border-color:var(--line-strong);color:var(--ink)} .tg-preview-wrap{display:grid;gap:8px;padding:15px} /* Пузырь сообщения: Telegram-HTML рендерится как есть, переводы строк — как в чате. */ .tg-preview{max-width:460px;padding:10px 13px;border-radius:12px 12px 12px 4px;background:var(--surface-2);border:1px solid var(--line);white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:1.45;color:var(--ink)} .tg-preview blockquote{margin:2px 0;padding-left:9px;border-left:3px solid var(--accent-dark)} .tg-preview pre,.tg-preview code{font-family:var(--num);font-size:12.5px} .tg-preview pre{margin:2px 0;white-space:pre-wrap} .tg-preview tg-spoiler{background:var(--line-strong);color:transparent;border-radius:3px} .tg-preview tg-spoiler:hover{color:inherit;background:transparent} .tg-preview-error{margin:0} .tg-check{border-top:1px solid var(--line)} .tg-check .tg-sub{max-width:320px;overflow-wrap:anywhere;text-align:right} .detail-list .status+.status{margin-left:4px} /* ========================================================================= ЭКРАН СЦ — идёт последним намеренно: киоск не должен зависеть ни от темы, ни от правил выше. Переменные пришпилены к значениям, которые действовали до редизайна, поэтому доска рендерится ровно как раньше в любой теме. ========================================================================= */ .page-mechanics-live,.kiosk-display{ --accent:#b7f000; --accent-dark:#799d00; --bg:#f4f5f6; --muted:#707983; --line:#dde2e6; --line-strong:#cbd2d8; --text:#111519; --ink:#111519; --ink-2:#5B6670; --ink-3:#707983; --success:#199253; --ok:#199253; --danger:#c93636; --surface:#fff; --surface-2:#f7f9fa; }