/*
 ВЗЛП · Отдел сборки — Calm Industrial 2026
 VISUAL LAYER ONLY. Does not implement or change any application logic.
 Style matching the approved light-gray/graphite/teal concept.
 No changes to display states, permissions, forms, IDs, or storage.
*/
:root{
  --bg:#f4f7f7!important;--panel:#fff!important;--text:#1c2b31!important;
  --muted:#788b8e!important;--line:#e4ebeb!important;
  --blue:#208379!important;--blue2:#e7f5f1!important;
  --cyan:#f8fbfb!important;--gray:#eff4f3!important;
  --head:#f6f9f8!important;--green:#1e806d!important;
  --greenbg:#e6f4ee!important;--yellow:#9a6f2b!important;
  --yellowbg:#fff3df!important;--red:#c05b56!important;
  --redbg:#fff0ee!important;--navy:#202e32!important;
  --gold:#60b0a2!important;--accent:#248479!important;
  --shadow:0 10px 32px rgba(24,51,53,.045)!important;
}
html,html body{background:#f4f7f7!important;color:#1c2b31!important;letter-spacing:-.005em!important}
body{background:#f4f7f7!important;}
.app{grid-template-columns:247px minmax(0,1fr)!important;max-width:none!important;margin:0!important}
.main{min-width:0!important;background:#f4f7f7!important;}
/* Persistent dark navigation */
.app > .side,.side{background:#202d31!important;color:#eaf1f1!important;
  border-right:1px solid #2c3c40!important;box-shadow:none!important;
  padding:24px 15px 17px!important;}
.side .brand{padding:2px 12px 26px!important;margin:0 0 16px!important;gap:12px!important;
  border-bottom:1px solid #394649!important;align-items:center!important}
.side .brand .logo{width:40px!important;height:40px!important;min-width:40px!important;
  border-radius:12px!important;background:#a9ddd2!important;box-shadow:none!important;
  display:flex!important;justify-content:center!important;align-items:end!important;
  gap:3px!important;padding:9px!important;}
.side .brand .logo i{display:block!important;width:6px!important;border-radius:3px!important;
  background:#1e5e57!important;}
.side .brand .logo i:nth-child(1){height:13px!important}
.side .brand .logo i:nth-child(2){height:20px!important}
.side .brand .logo i:nth-child(3){height:26px!important}
.side .brand b{color:#fff!important;font-size:19px!important;font-weight:780!important;letter-spacing:-.5px!important;line-height:1.1!important}
.side .brand small{color:#a2b5b8!important;font-size:11px!important;text-transform:none!important;letter-spacing:0!important;font-weight:450!important}
.side .brand em{color:#91a6a8!important;font-size:9px!important;letter-spacing:.3px!important;text-transform:none!important;line-height:1.4!important}
.side .nav{gap:3px!important}
.side .nav .navlabel,.side .nav .vz-navgroup{font-size:10px!important;color:#869da0!important;
  text-transform:none!important;letter-spacing:1.35px!important;font-weight:750!important;
  margin:19px 12px 10px!important;line-height:1.4!important}
.side .nav button{display:flex!important;align-items:center!important;gap:11px!important;
  width:100%!important;min-height:43px!important;padding:11px 12px!important;
  border:1px solid transparent!important;border-radius:10px!important;
  background:transparent!important;color:#bccbcf!important;
  font-size:12.5px!important;font-weight:570!important;line-height:1.3!important;
  box-shadow:none!important;text-align:left!important;letter-spacing:-.05px!important;}
.side .nav button:hover{background:#2a3b3e!important;color:#fff!important}
.side .nav button.active,.side .nav button[aria-current="page"]{background:#344b48!important;
  color:#effbf8!important;border-color:#385652!important;font-weight:725!important;box-shadow:none!important;}
.side .nav button.active:before,.side .nav button[aria-current="page"]:before{display:none!important}
.side .nav button.active svg,.side .nav button.active .vz-navicon{color:#a6dfd2!important;}
.side .nav button[data-view="techspecs"]:not(.active){color:#cce3dc!important}
.side .nav .vz-navicon{background:transparent!important;color:#9bb2b4!important;border:0!important;}
.side .nav details summary{color:#b3c8c8!important;border-radius:9px!important}
.side .sidefoot{color:#92a7a9!important;border-top:1px solid #3b4b4e!important;
  font-size:10px!important;line-height:1.65!important;padding:15px 10px 7px!important}
.side .sidefoot .dot{background:#82cbb6!important;box-shadow:0 0 0 3px #82cbb624!important}
/* Top app bar: softly defined, not bulky */
.top{background:#f4f7f7!important;color:#1c2b31!important;box-shadow:none!important;
  border-bottom:1px solid #e2e9e9!important;padding:19px 34px 18px!important;
  min-height:82px!important;gap:14px!important;backdrop-filter:blur(16px)!important;}
.top:after{display:none!important}
.top h1{color:#1c2b31!important;font-size:22px!important;font-weight:780!important;
  letter-spacing:-.65px!important;line-height:1.2!important;}
.top .sub{color:#849397!important;font-size:11.5px!important;line-height:1.45!important}
.top .actions{gap:8px!important}
.top .btn{background:#fff!important;color:#344b4c!important;border:1px solid #e2eaea!important;
  font-size:12px!important;min-height:39px!important;box-shadow:none!important;}
.top .btn.primary{background:#218279!important;color:#fff!important;border-color:#218279!important;}
.top .btn.primary:hover{background:#196c65!important}
.top .pill,.top .save-indicator{background:#e8f4ef!important;color:#247c6f!important;
  border:1px solid #d0e7df!important;box-shadow:none!important;font-size:10.5px!important;
  padding:8px 10px!important;white-space:nowrap!important;border-radius:9px!important;}
/* User-facing cards and headings */
.content{padding:28px 34px 50px!important;max-width:1700px!important;color:#1c2b31!important}
.card,.reference-card,.assembly-card,.archive-shift,.cx-overview .cx-panel,.tz-card,.vzpl-card{
  background:#fff!important;border:1px solid #e4ebeb!important;
  border-radius:16px!important;box-shadow:0 10px 32px rgba(24,51,53,.04)!important;
  color:#263d40!important;}
.card h2,.card h3,.card h4{color:#223338!important}
.card .sub,.card p,.directory-note{color:#7b8b90!important}
.content > .page-intro,.content > .directory-note{color:#223338!important}
.content > .page-intro h2,.page-intro h2{color:#202d32!important}
.content > .page-intro p,.page-intro p{color:#859599!important}
.content > .page-intro .eyebrow,.eyebrow{color:#23877a!important}
.btn{background:#fff!important;color:#2b4445!important;border:1px solid #e0e9e7!important;
  border-radius:10px!important;box-shadow:none!important;min-height:38px;
  font-size:12px;font-weight:700!important;transition:background .16s,border-color .16s,box-shadow .16s!important;}
.btn:not(:disabled):hover{background:#f1f8f5!important;border-color:#bfded6!important;transform:none!important}
.btn.primary,#content .tz-action{background:#218279!important;color:#fff!important;
  border-color:#218279!important;box-shadow:none!important;}
.btn.primary:not(:disabled):hover,#content .tz-action:hover{background:#196d64!important;border-color:#196d64!important}
.btn.danger{background:#fff4f2!important;border-color:#f4d9d6!important;color:#b65752!important}
:where(button,input,select,textarea,a):focus-visible{outline:3px solid #8dcfc0!important;outline-offset:2px!important}
input:focus,select:focus,textarea:focus{outline:2px solid #a6d9cf!important;outline-offset:0!important;}
.field input,.field select,.field textarea,.entry-grid input,.entry-grid select,.entry-grid textarea{
  border:1px solid #dae6e3!important;border-radius:10px!important;background:#fff!important;
  color:#233b3e!important;min-height:40px;}
.field label,.entry-grid label{color:#667c7f!important}
.pill,.badge,.tag{border-radius:8px!important;background:#f0f5f4!important;
  color:#587170!important;border-color:#e1ebe8!important}
.pill.blue,.article-tag,.badge.good{background:#e4f4ef!important;color:#247e6e!important;border-color:#d1e9df!important}
.badge.warn,.status.near{background:#fff1db!important;color:#9b712a!important}
.badge.red,.status.low{background:#fff0ee!important;color:#c05b56!important}
.status.ok{background:#e3f5ec!important;color:#237b60!important}
.status.none{background:#f1f5f5!important;color:#839394!important}
.category-tab.active,.category-tabs .active{background:#218279!important;border-color:#218279!important;color:#fff!important}
.reference-search input{background:#f9fbfb!important}
.catalog-stat,.machineNums div{background:#fff!important;border-color:#e6eeee!important}
.catalog-stat strong,.catalog-stat .stat-icon,.assembly-card-head b,.machineNums b,.run-values b{color:#2b5550!important}
.catalog-stat .stat-icon{background:#edf7f4!important}
/* The overview: respect its real plan/fact data and existing markup. */
.cx-overview{color:#1c2b31!important;}
.cx-eyebrow{color:#248679!important;font-weight:760!important;letter-spacing:1.5px!important;
  font-size:10px!important;margin-bottom:8px!important;}
.cx-eyebrow i{background:#278c7e!important;box-shadow:0 0 0 4px #278c7e14!important}
.cx-heading{margin:11px 0 26px!important;align-items:end!important;gap:25px!important}
.cx-heading h2{color:#19272c!important;font-size:clamp(27px,2.5vw,35px)!important;
  letter-spacing:-1.4px!important;font-weight:790!important;line-height:1.12!important;}
.cx-heading h2 span{color:#248679!important}
.cx-heading p{color:#819398!important;font-size:12px!important;line-height:1.6!important;}
.cx-shift-switch label{color:#74898c!important;font-size:11px!important}
.cx-shift-switch select{background:#fff!important;color:#314a4b!important;
  border:1px solid #dfe9e6!important;box-shadow:none!important;border-radius:10px!important;}
.cx-hero-grid{gap:15px!important;grid-template-columns:1fr 1fr!important;}
.cx-output{background:#fff!important;border:1px solid #e4ebeb!important;color:#213338!important;
  border-radius:16px!important;padding:23px!important;min-height:195px!important;
  box-shadow:0 10px 30px rgba(24,51,53,.04)!important;}
.cx-output:after{display:none!important}
.cx-output .cx-tile-label{color:#76898e!important;font-size:12px!important;font-weight:650!important}
.cx-output .cx-tile-label svg{color:#248679!important}
.cx-output .cx-big-number{color:#1c2b31!important;font-size:clamp(32px,3.9vw,53px)!important;
  letter-spacing:-1.5px!important;font-weight:790!important}
.cx-output .cx-target{color:#7d8f92!important;font-size:11px!important}
.cx-output .cx-tile-footer{color:#657e7e!important}
.cx-output .cx-tile-footer button{background:#e8f5f0!important;color:#23786c!important;border-radius:8px!important}
.cx-progress{background:#eaf6f2!important;border:1px solid #d7eae3!important;
  color:#223f3d!important;border-radius:16px!important;padding:23px!important;min-height:195px!important;
  box-shadow:0 10px 30px rgba(24,51,53,.04)!important}
.cx-progress h3{color:#24443d!important;font-weight:750!important;font-size:17px!important}
.cx-progress p{color:#6a9287!important;font-size:11px!important}
.cx-progress .cx-target{color:#207b67!important;font-weight:750!important}
.cx-ring{background:conic-gradient(#58ab99 calc(var(--p)*1%),#cce5dc 0)!important}
.cx-ring-core{background:#eff9f5!important}
.cx-ring strong{color:#20685d!important}
.cx-ring small{color:#7aa396!important}
.cx-minis{gap:14px!important;margin:17px 0 21px!important}
.cx-mini{background:#fff!important;border:1px solid #e5eceb!important;
  border-radius:16px!important;padding:19px!important;
  box-shadow:0 8px 30px rgba(24,51,53,.04)!important;}
.cx-mini svg{color:#3a9788!important}
.cx-mini span{color:#778c90!important;font-size:11px!important}
.cx-mini strong{color:#1c2b31!important;font-weight:790!important;font-size:26px!important}
.cx-mini small{color:#84979a!important}
.cx-overview .cx-panel{margin-top:18px!important}
.cx-panel-head{border-bottom:1px solid #edf1f0!important;padding:18px 20px!important}
.cx-panel-head h3{color:#21373a!important;font-weight:750!important;font-size:15px!important}
.cx-panel-head p{color:#8a9c9c!important;font-size:11px!important}
.cx-machine-table th,.cx-machine-table thead th{background:#f7f9f9!important;color:#86989a!important;
  border-color:#e6ebeb!important;font-size:10px!important;letter-spacing:.5px!important}
.cx-machine-table tbody td{background:#fff!important;color:#344e50!important;
  border-color:#edf1f1!important;font-size:12px!important}
.cx-attention{background:#fffbf2!important;color:#34494a!important;border-color:#f5ebda!important}
/* Tables: bright, clean, legible (retaining widths and calculations). */
.sheet{border-top:0!important;overflow:hidden!important}
.shiftbar{background:#fff!important;border:1px solid #e2ebea!important;border-left:4px solid #5bad9d!important;}
.sheethead{background:#fff!important;border-bottom:1px solid #e9eeee!important}
.sheethead h2,.summarybox h3,.transition-heading h3{color:#223a3e!important}
.kpis{gap:13px!important;margin-bottom:18px!important}
.kpi{background:#fff!important;border:1px solid #e4ebeb!important;border-radius:16px!important;
  padding:18px!important;box-shadow:0 8px 28px rgba(20,47,49,.04)!important;}
.kpi:before{display:none!important}.kpi:nth-child(n){background:#fff!important;border-color:#e4ebeb!important}
.kpi label,.kpi:nth-child(n) label{color:#809296!important;letter-spacing:0!important;text-transform:none!important;font-weight:650!important;font-size:11.5px!important}
.kpi strong,.kpi:nth-child(n) strong{color:#192a30!important;font-size:26px!important;font-weight:800!important}
.kpi small,.kpi:nth-child(n) small{color:#92a3a5!important}
.sheet thead th,.assembly-table th,th,.employee-table th,.sumtable th,.periodtable th,
.vz-fact-table th{background:#f5f8f7!important;color:#6c8585!important;
  border-color:#e4eaea!important;font-size:10.5px!important;letter-spacing:.25px!important;
  font-weight:730!important;text-align:left!important;text-transform:none!important;}
.sheet tbody td,.assembly-table td,.employee-table td,.sumtable td,.periodtable td,
.vz-fact-table td{border-color:#e8eeee!important;color:#284147!important;background:#fff!important;}
.sheet tbody tr:nth-child(even) td,.assembly-table tbody tr:nth-child(even) td{background:#fafcfc!important}
.sheet tbody tr:hover td{background:#f1f9f7!important}
.sheet tbody td.sticky1,.sheet tbody td.sticky2{background:#fff!important}
.sheet tbody td input,.sheet tbody td select,.sheet tbody td textarea{color:#223b40!important}
.assembly-table td input,.assembly-card .numbers input,.time-pair input{background:#f8fbfa!important;
  border:1px solid #e1eae7!important;color:#263f42!important}
.assembly-table td input[data-f=actual],.assembly-table td input[data-f=actualBoxes]{background:#f2faf6!important}
.assembly-table td input[readonly],.assembly-card input[readonly],.entry-grid input[readonly]{background:#eff7f4!important;color:#276c5c!important}
.progress span,.miniProgress span,.barTrack span{background:#55ab9b!important}
.barTrack.orange span{background:#e3b361!important}
.notice.info,.periodnote{background:#edf7f3!important;border-color:#d3e9df!important;color:#377867!important}
.notice{background:#fff8e9!important;border-color:#f3e6ce!important;color:#906b31!important}
.notice.error{background:#fff0ee!important;border-color:#f0d4d0!important;color:#b35851!important}
.mobilecard,.machineCard,.historyrow{background:#fff!important;border-color:#e4ebeb!important;border-radius:14px!important}
.mobilecard .mc-calc{background:#f4f8f7!important}
/* Documents and production planning */
#content .tz-head h2{color:#202f33!important;font-weight:790!important;font-size:25px!important}
#content .tz-head p{color:#83979a!important;font-size:12px!important}
#content .tz-eyebrow{color:#248679!important}
#content .tz-controls,#content .tz-card,#content .tz-upload,
#content .vzpl-uploaded,#content .vzpl-product-picker{border-color:#e0eae6!important;border-radius:14px!important}
#content .tz-card h3{color:#2a4243!important}
#content .tz-card:hover{border-color:#badbd1!important;box-shadow:0 10px 26px #1f494912!important}
#content .tz-controls input,#content .tz-controls select,
#content .tz-form input,#content .tz-form select,#content .tz-form textarea,
#content .vzpl-product-picker input,#content .tz-product-select input{
  background:#fff!important;color:#274241!important;border:1px solid #dce9e5!important;
  border-radius:9px!important;min-height:42px!important}
#content .vzpl-group-btn{border-radius:9px!important}
#content .vzpl-group-btn.active{background:#e6f4ef!important;color:#247c6d!important;border-color:#b9ded3!important}
#content [data-vzpl-delete],#content .vzpl-danger,#content [data-tz-delete]{background:#fff4f2!important;color:#bb5751!important;border-color:#efd3cd!important}
/* Authentication and network status remain fully functional, only colors change. */
#netBar{background:#e8efed!important;border-bottom:1px solid #dce8e3!important;color:#5a7775!important;
  padding:8px 25px!important;font-size:10.5px!important}
#netBar button{background:#fff!important;color:#506c6b!important;border-color:#d6e3de!important}
#netBar #logoutNet{color:#ad5954!important}
#loginBox{background:#fff!important;border:1px solid #e2ece8!important;
  border-radius:18px!important;box-shadow:0 18px 65px #203a3b15!important;}
#loginBox:before{color:#20857b!important}
#loginBox h2{color:#1e2c32!important}
#loginBox input{background:#f8fbfa!important;color:#284649!important;border-color:#dce9e5!important}
.dialog-layer,.modalback{background:#172c2baa!important;backdrop-filter:blur(5px)!important}
.dialog-panel,.modal{background:#fff!important;border-radius:17px!important;border-color:#e2eae8!important;
  box-shadow:0 30px 90px #162a2e30!important;}
.dialog-head,.dialog-footer{background:#fff!important;border-color:#e5eae9!important}
.dialog-head h2,.modal h2{color:#1e3337!important}
.toast{background:#223b3b!important;color:#fff!important;border-left:4px solid #6ec1ad!important}
/* Tablet and mobile layouts retain original open/close handling. */
@media(min-width:1500px){.content{padding-left:42px!important;padding-right:42px!important}.top{padding-left:42px!important;padding-right:42px!important}}
@media(max-width:1120px) and (min-width:761px){
 .app{grid-template-columns:214px minmax(0,1fr)!important}
 .side{padding:19px 10px!important}
 .content{padding:22px 20px 42px!important}
 .top{padding:16px 20px!important}
 .cx-heading h2{font-size:34px!important}
}
@media(max-width:760px){
 .app{grid-template-columns:1fr!important}
 .app>.side,.side{position:fixed!important;inset:0 auto 0 0!important;
   width:min(290px,90vw)!important;height:100dvh!important;z-index:160!important;
   padding:19px 12px!important;overflow-y:auto!important;
   /* Preserve the original .open transform and transition. */}
 .side .nav button{min-height:46px!important;font-size:13px!important}
 .main{width:100%!important;min-width:0!important}
 .top{padding:13px 14px!important;min-height:69px!important;gap:7px!important;}
 .top h1{font-size:18px!important;max-width:215px!important}
 .top .sub{font-size:10px!important;max-width:220px!important}
 .top .actions{gap:5px!important}
 .top #newShiftBtn{padding:8px 10px!important;min-height:38px!important;font-size:11px!important}
 .top #menu{display:inline-grid!important;place-items:center!important;
   min-width:39px!important;width:39px!important;height:39px!important;
   background:#fff!important;color:#42605d!important;border-color:#e3ebea!important;
   font-size:19px!important;padding:0!important}
 .content{padding:17px 13px 90px!important;}
 .card,.cx-overview .cx-panel{border-radius:13px!important}
 .cx-heading{align-items:flex-start!important;gap:10px!important;margin:6px 0 18px!important;}
 .cx-heading h2{font-size:27px!important;letter-spacing:-.8px!important;}
 .cx-heading p{font-size:11px!important}
 .cx-hero-grid{grid-template-columns:1fr!important;gap:10px!important}
 .cx-output,.cx-progress{padding:17px!important;min-height:160px!important}
 .cx-big-number{font-size:39px!important}
 .cx-minis{gap:8px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .cx-mini{padding:13px!important}
 .cx-mini strong{font-size:21px!important}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 .kpi{padding:14px!important;min-height:98px!important}
 .kpi strong{font-size:22px!important}
 .sheet .tablewrap{scrollbar-width:thin}
 .mobilecard{padding:14px!important}
 #content .tz-head h2{font-size:20px!important}
 .top #runtimeStatus{display:none!important}
}
@media(max-width:400px){
 .cx-heading h2{font-size:25px!important}
 .cx-minis{grid-template-columns:1fr 1fr!important}
 .cx-mini{padding:11px!important}
 .cx-mini span{font-size:10px!important}
 .top h1{font-size:16px!important}
 .content{padding-left:11px!important;padding-right:11px!important}
 .actions .btn{padding-left:8px!important;padding-right:8px!important}
}
/* Do not paint colored backgrounds in PDF/printouts. Existing print rules control the layout. */
@media print{
 html,html body,body,.main{background:#fff!important}
 .card,.cx-overview .cx-panel{box-shadow:none!important}
}