/* WireCut Studio — style wspólnych okien modalnych, biblioteki projektów i symulatora. */

/* ---------- okna modalne ---------- */
html.modalOpen body{overflow:hidden}
.wcModalCard:focus{outline:none}
.wcModal.busy .wcModalCard{cursor:progress}
.wcModal.busy [data-modal-primary]{position:relative;padding-left:34px}
.wcModal.busy [data-modal-primary]::before{content:"";position:absolute;left:12px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:2px solid #ffffff55;border-top-color:#fff;animation:wirecutSpin .8s linear infinite}
.wcModalError{margin-top:12px;padding:10px 12px;border-radius:10px;background:#351015;border:1px solid #cc4651;color:#ffb3b8;line-height:1.45}
.wcModalError[hidden]{display:none}
.projectSaveCard{display:block}
.saveTarget{margin:0 0 12px;padding:10px 12px;border:1px solid #315575;border-radius:10px;background:#0c2031}
.saveTarget[hidden]{display:none}
.saveTarget legend{padding:0 6px;color:#9eb2cb;font-size:12px}
.saveTarget label{display:flex;align-items:center;gap:8px;margin:4px 0;color:#d8e8f8}
.saveTarget input{width:auto;margin:0}
.projectTile.current{border-color:#43d17f;box-shadow:0 0 0 1px #43d17f55}
.currentBadge{display:inline-flex;margin-left:4px;padding:3px 7px;border-radius:999px;font-size:10px;font-weight:900;color:#bfffd4;background:#103824;border:1px solid #24975a}
.projectTileBody b{display:block;margin-top:6px}

/* ---------- symulator maszyny ---------- */
.simulatorCard{border-left:3px solid #42d7cf}
.simulatorCard.active{box-shadow:0 0 0 1px #42d7cf66}
.simBadge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;border:1px solid #34495e;color:#9bb0c2;background:#182636}
.simBadge.on{color:#bafff7;background:#0c3634;border-color:#2aa89f}
.simBadge.on::before{content:"";width:7px;height:7px;border-radius:50%;background:#42d7cf;box-shadow:0 0 6px #42d7cf}
.simSettings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.simSettings label{display:grid;gap:5px;font-size:12px;color:#9eb2cb}
.simReadout{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-top:12px}
.simReadout[hidden]{display:none}
.simReadout .stat b{font-size:14px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.simReadout .wide{grid-column:1/-1}
#simState[data-state="Run"],#simState[data-state="Jog"]{color:#79efab}
#simState[data-state="Hold"]{color:#ffd77c}
#simState[data-state="Alarm"]{color:#ff737d}
.simFaults{margin-top:12px}
.simFaults summary{cursor:pointer;color:#9eb2cb}
.simFaults .row{margin-top:8px}
.plotterTop.simulated{background:#0c3634;border-color:#42d7cf}
@media(max-width:620px){.simSettings{grid-template-columns:1fr}}

/* ======================================================================
 * Ergonomia 4.12 — 3 zakładki pracy, reszta w oknach modalnych
 * ====================================================================== */
body.rotaryMode .flatOnly{display:none!important}
body:not(.rotaryMode) .rotaryOnly{display:none!important}
[hidden]{display:none!important}

/* nawigacja krokowa */
.topbar{gap:10px;flex-wrap:wrap;row-gap:8px}
.topbar>*{flex-shrink:0}
.topbar>.topspacer{flex-shrink:1;min-width:0}
.topbar>.topSvgBtn.loaded{flex-shrink:1;min-width:120px}
/* duplikaty informacji w pasku: tryb widać w liście wyboru, stan połączenia na przycisku */
.topbar #cutModeBadge,.topbar #serialChip,.topbar .cutModeControls>label{display:none}
.nav{flex-wrap:nowrap}
.nav button,.topSvgBtn,.topSaveProjectBtn{white-space:nowrap}
@media(max-width:620px){.nav{flex-wrap:wrap}}
.nav button{display:inline-flex;align-items:center;gap:7px}
.navStep{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#17324d;color:#8fc6ff;font-size:11px;font-weight:900}
.nav button.active .navStep{background:#2563eb;color:#fff}
.navBadge:empty{display:none}
.navBadge{padding:1px 7px;border-radius:999px;font-size:11px;font-weight:800;background:#352506;color:#ffd77c;border:1px solid #78530b}
.navBadge.ready{background:#0e2e21;color:#79efab;border-color:#1f6f47}
.navBadge.running{background:#12653f;color:#fff;border-color:#39c77f}
.iconBtn{min-width:38px;padding:7px 9px;font-size:16px;line-height:1}
.linkBtn{background:none;border:0;padding:0;color:#8fc6ff;font:inherit;text-decoration:underline;cursor:pointer}
.linkBtn:hover{color:#bfe4ff}

/* nagłówki kroków i przejście dalej */
.stepIntroHead{display:flex;gap:12px;align-items:flex-start}
.stepIntroHead>div{flex:1;min-width:0}
.stepIntroHead h2{margin:0 0 4px}
.stepIntroHead p{margin:0}
.stepNo{flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2563eb;color:#fff;font-weight:900;font-size:17px}
.stepIntro .row{margin-top:12px}
.nextStep{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:4px 0 12px}
.nextStep .btn{min-width:220px}
.moreActions{margin-top:10px}
.moreActions>summary{cursor:pointer;color:var(--muted);font-size:13px;padding:4px 0}
.moreActions[open]>summary{margin-bottom:8px}

/* „Jak zacząć ciąć” */
.readinessCard{border-top-width:4px}
.readinessList{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.readinessStep{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;border:1px solid transparent;color:var(--muted)}
.readinessStep .stepIcon{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:#12263b;border:1px solid #2c4866;color:#9eb2cb}
.readinessStep .stepBody{flex:1;min-width:0}
.readinessStep .stepBody>b{font-weight:700}
.readinessStep.done{color:#9ee8bb}
.readinessStep.done .stepIcon{background:#0e2e21;border-color:#1f6f47;color:#79efab}
.readinessStep.done .stepBody>b{font-weight:600}
.readinessStep.next{background:#132a41;border-color:#3d6b9e;color:var(--text)}
.readinessStep.next .stepIcon{background:#2563eb;border-color:#4380ff;color:#fff}
.readinessStep.optional .stepIcon{border-style:dashed}
.stepTag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.04em;background:#2563eb;color:#fff;vertical-align:1px}
.stepTag.soft{background:transparent;border:1px solid #3d5876;color:#9eb2cb}
.stepHint{margin-top:5px;color:#b9cde2;line-height:1.5}
.stepActions,.issue{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.issue{margin:0 0 8px}
.issue>span{flex:1;min-width:200px}
.actionBtn{padding:6px 11px;font-size:13px;background:#1c3b5c;border-color:#3d6b9e}
.actionBtn:hover{background:#24507d}
#cutWarnings:empty{display:none}
#cutWarnings{margin-bottom:10px}
.needsAction{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* joystick: drut + obrót materiału */
.jogLayout{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;align-items:start}
.jogBlock{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#0a1828}
.jogLabel{font-weight:800;color:#d8e8f8}
.rotaryJog{border-color:#6a55a8;background:#130f2a}
.rotaryJoy{display:grid;grid-template-columns:1fr 64px 1fr;gap:6px}
.rotaryJoy .btn{min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:24px;background:#241c4a;border-color:#6a55a8}
.rotaryJoy .btn small{font-size:11px;font-weight:700;color:#c9bcff}
.rotaryJoy #materialZeroBtn{font-size:18px;background:#704f0b;border-color:#a47519}
.rotaryJoy .btn.needsSetup{opacity:.72;border-style:dashed}
.rotaryJogFields{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rotaryJogFields label{display:grid;gap:4px;font-size:12px;color:var(--muted)}
#materialOriginStatus{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;line-height:1.45}
#materialOriginStatus:empty{display:none}
.rotaryJogOff{align-content:start}
.rotaryJogOff p{margin:0}
.keysHint{margin:10px 0 4px;font-size:12px;line-height:1.9}

/* okno Maszyna — sekcje z nawigacją */
.wcModal.wcModalXL .wcModalCard{width:min(1100px,100%);max-height:92vh;display:flex;flex-direction:column;padding:18px 20px}
.modalHead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.modalHead h2{margin:0!important;flex:1}
.modalCloseBtn{padding:6px 11px}
.modalNotice{margin:0 0 10px;padding:11px 13px;border-radius:10px;background:#352506;border:1px solid #a47519;color:#ffd77c;line-height:1.5;font-weight:600}
.modalNotice:focus{outline:2px solid #ffd166;outline-offset:2px}
.sectionedBody{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;min-height:0;flex:1}
.sectionNav{display:flex;flex-direction:column;gap:4px;align-self:start;position:sticky;top:0}
.sectionNav button{text-align:left;border:1px solid transparent;background:none;color:var(--muted);padding:8px 10px;border-radius:9px;font-weight:700}
.sectionNav button:hover{background:#12263b;color:#d8e8f8}
.sectionNav button.active{background:#17385d;border-color:#3d6b9e;color:#fff}
.sectionScroll{overflow:auto;min-height:0;max-height:calc(92vh - 110px);padding-right:4px;scroll-padding-top:4px}
.sectionScroll>.machineSection{margin-bottom:12px}
#machineSecAxes:empty{display:none}
@media(max-width:760px){.sectionedBody{grid-template-columns:1fr}.sectionNav{flex-direction:row;flex-wrap:wrap;position:static}.sectionScroll{max-height:none}}

/* pomoc */
.helpNav{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.helpNav a{padding:5px 10px;border-radius:999px;border:1px solid #2c4866;color:#bfe4ff;text-decoration:none;font-size:13px}
.helpNav a:hover{background:#132a41}
.helpDoc h3{margin:18px 0 8px;scroll-margin-top:8px}
.helpDoc h3:first-child{margin-top:0}
.helpDoc h4{margin:14px 0 6px;color:#bfe4ff}
.helpDoc li{margin:4px 0;line-height:1.5}

/* podświetlenie miejsca, do którego prowadzi komunikat */
@keyframes wcFlash{0%{box-shadow:0 0 0 0 #ffd166cc}40%{box-shadow:0 0 0 4px #ffd16699}100%{box-shadow:0 0 0 0 #ffd16600}}
.flash{animation:wcFlash 1.5s ease-out}

/* komunikaty (zamiast alert) */
.toastHost{position:fixed;right:18px;bottom:18px;z-index:130000;display:grid;gap:8px;width:min(440px,calc(100vw - 32px))}
.toast{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:11px 12px;border-radius:12px;background:#352506;border:1px solid #a47519;color:#ffe2a6;box-shadow:0 14px 40px rgba(0,0,0,.5);line-height:1.45}
.toast.error{background:#351015;border-color:#cc4651;color:#ffc2c6}
.toast.ok{background:#0e2e21;border-color:#2ca96e;color:#a9f5c8}
.toastText{flex:1;min-width:180px}
.toastClose{background:none;border:0;color:inherit;opacity:.7;font-size:14px;padding:2px 4px}
.toastClose:hover{opacity:1}
.plotterTop.alarm{background:#72500b;border-color:#ffb347}
@media(max-width:1750px){.topbar #dirtyChip{display:none}}
@media(max-width:1600px){.topbar .version{display:none}.topbar .brand{font-size:16px}}
@media(max-width:1380px){.topbar #scaleStatusChip{display:none}}

/* ======================================================================
 * 4.12.1 — okno Maszyna jako prowadzony proces (1 Połączenie → 2 Silniki → 3 Oś obrotu → 4 Zapis)
 * ====================================================================== */
.machineSteps{gap:6px}
.machineSteps button{display:flex;align-items:center;gap:10px;padding:8px 10px}
.machineSteps .msNo{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:#12263b;border:1px solid #2c4866;color:#9eb2cb}
.machineSteps .msNo[data-state="done"]{background:#0e2e21;border-color:#1f6f47;color:#79efab}
.machineSteps .msNo[data-state="warn"]{background:#352506;border-color:#a47519;color:#ffd77c}
.machineSteps .msNo[data-state="na"]{border-style:dashed}
.machineSteps button.active .msNo[data-state="todo"]{background:#2563eb;border-color:#4380ff;color:#fff}
.machineSteps .msText{display:grid;line-height:1.2;text-align:left}
.machineSteps .msText small{font-weight:600;color:#7f95ad;font-size:11px}
.machineSteps .msSub{padding-left:20px}
.machineSteps .msSub .msNo{flex-basis:20px;height:20px;background:none;border:0}
.machineSteps .msService{margin-top:10px;border-top:1px solid var(--line);border-radius:0;padding-top:12px}

.secHead{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.secHead h2{margin:0!important;flex:1}
.secNo{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#2563eb;color:#fff;font-weight:900;font-size:16px}
.secState{font-size:12px;font-weight:800;padding:3px 10px;border-radius:999px;border:1px solid #3d5876;color:#9eb2cb;white-space:nowrap}
.secState[data-state="done"]{background:#0e2e21;border-color:#1f6f47;color:#79efab}
.secState[data-state="warn"]{background:#352506;border-color:#a47519;color:#ffd77c}
.secState[data-state="todo"]{background:#132a41;border-color:#3d6b9e;color:#bfe4ff}
.secWhy{margin:0 0 10px;color:#c6d6e8;line-height:1.55}
.secHow{margin:0 0 12px;padding-left:22px;color:#b9cde2;line-height:1.6}
.secHow li{margin:3px 0}
.secAlt{margin:0 0 12px;color:var(--muted)}
.secStatus{margin:12px 0;padding:9px 11px;border-radius:9px;line-height:1.5}
.secStatus:empty{display:none}
.secNote{margin:10px 0 0;line-height:1.5}
.secNext{display:flex;justify-content:flex-end;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.connStats{margin-top:4px}
.connStats .stat b{font-size:15px;overflow-wrap:anywhere}
.infobox{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#0f2238;border:1px solid #3d6b9e;color:#cfe3f7}
.infobox>span{flex:1;min-width:220px}
.modalNotice{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.modalNotice>span{flex:1;min-width:240px}
.modalNotice.resolved{background:#0e2e21;border-color:#2ca96e;color:#a9f5c8}

/* krok 2: role silników */
.roleTable{display:grid;gap:8px;margin:4px 0 10px}
.roleRow{display:grid;grid-template-columns:minmax(170px,1.3fr) 110px auto minmax(140px,1fr);gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#0a1828}
.roleRow.tested{border-color:#1f6f47}
.roleRow.conflict{border-color:#cc4651;background:#240d12}
.roleName{display:flex;gap:10px;align-items:center}
.roleName small{display:block;color:var(--muted);font-size:12px}
.roleIcon{flex:0 0 38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:22px;background:#17324d;color:#bfe4ff}
.roleLetter{display:grid;gap:3px;font-size:11px;color:var(--muted)}
.roleLetter select{font-size:16px;font-weight:800;padding:6px 8px}
.roleTest{display:flex;gap:6px}
.roleTest .btn{padding:8px 12px}
.roleStatus{font-size:13px}
.roleRow.tested .roleStatus{color:#79efab}
.roleStatus .bad{color:#ff9ba2;font-weight:700}
body:not(.rotaryMode) .roleRow[data-role="r"]{opacity:.75}
.roleTestSettings{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px;color:#c6d6e8}
.roleTestSettings label{display:inline-flex;gap:6px;align-items:center}
.roleTestSettings input{width:90px;padding:6px 8px}
.roleTestSettings .muted{flex-basis:100%;font-size:12px}
.confirmRow{display:flex;gap:10px;align-items:flex-start;margin:10px 0;padding:10px 12px;border-radius:10px;background:#0c2031;border:1px solid #315575;cursor:pointer;line-height:1.45}
.confirmRow input{width:20px;height:20px;margin:1px 0 0;flex:0 0 20px}
.confirmRow:has(input:checked){border-color:#2ca96e;background:#0e2e21}
.confirmRow:has(input:disabled){opacity:.6;cursor:not-allowed}
.serviceTest .row{margin-top:8px}
@media(max-width:900px){.roleRow{grid-template-columns:1fr 100px}.roleTest,.roleStatus{grid-column:1/-1}}

/* krok 3: kalibracja */
.calPrep{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:#0c1d30;border:1px solid #2c4866;color:#c6d6e8}
.calPrep ul{margin:6px 0 0;padding-left:20px;line-height:1.6}
.calPrep li.ok{color:#79efab}
.calPrep li.ok::marker{content:"✓  "}
.calSteps{display:flex;gap:6px;list-style:none;margin:0 0 10px;padding:0;flex-wrap:wrap}
.calSteps li{flex:1;min-width:140px;display:flex;gap:8px;align-items:center;padding:7px 10px;border-radius:9px;border:1px solid #2c4866;color:#9eb2cb;font-weight:700;font-size:13px}
.calSteps li b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#12263b;font-size:12px}
.calSteps li.active{border-color:#4380ff;background:#132a41;color:#fff}
.calSteps li.active b{background:#2563eb}
.calSteps li.done{border-color:#1f6f47;color:#79efab}
.calSteps li.done b{background:#0e2e21}
.calStage{margin:10px 0;padding:12px;border-radius:10px;background:#101d33;border:1px solid #4a3d7a}
.calStage[hidden]{display:none}
#calIntro{background:none;border:0;padding:0;margin:0 0 8px;color:#b9cde2}
#calIntro p{margin:0}
.calStage h4{margin:0 0 8px;color:#e3dcff}
.calHow{margin:0 0 10px;padding-left:22px;line-height:1.6;color:#c6d6e8}
.calMainActions{margin:8px 0}
.calInvalidate{margin-top:12px}
.calInvalidate summary{cursor:pointer;color:var(--muted);font-size:13px}
.calInvalidate p{color:#b9cde2;margin:8px 0}