:root{--bg:#f3f5f1;--panel:#fff;--ink:#1d2428;--muted:#68737a;--line:#d9dfd8;--side:#20282d;--primary:#1f6b5f;--primaryDark:#174f47;--accent:#c47b2c;--danger:#a33d3d}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer}.layout{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}.side{padding:24px;background:var(--side);color:#fff}.brand{display:flex;gap:12px;align-items:center;margin-bottom:24px}.brandIcon{display:grid;place-items:center;width:48px;height:48px;border-radius:8px;background:var(--accent);font-weight:700}h1,h2,h3,p{margin:0}.brand h1{font-size:20px}.brand p,.muted{color:var(--muted);font-size:13px}.side .muted,.side .brand p{color:#b9c4c9}.field{display:grid;gap:8px;margin-bottom:20px;font-size:13px;color:#d7e0e4}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}input.fieldError,textarea.fieldError,select.fieldError{border-color:var(--danger);box-shadow:0 0 0 2px rgba(163,61,61,.12)}.fieldErrorText{margin-top:-3px;color:var(--danger);font-size:12px;font-weight:700}input,select{min-height:42px;padding:0 12px}textarea{padding:10px 12px;resize:vertical;line-height:1.5;white-space:pre-wrap}.orderForm textarea{overflow:hidden;resize:none}.richInput{width:100%;min-height:44px;padding:14px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);line-height:1.62;white-space:pre-wrap;outline:none}.technicalBlock .richInput{line-height:1.66}.richInput .richParagraph{min-height:1.35em;margin:0 0 10px}.richInput .richParagraph:last-child{margin-bottom:0}.richInput .richBlank{min-height:12px}.richInput .richDivider{height:1px;margin:14px 0;background:var(--line)}.payrollFrame{width:100%;height:calc(100vh - 122px);border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 8px 28px rgba(31,42,50,.06)}.richInput.empty{min-height:44px}.richInput:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(31,107,95,.10)}.richInput b,.richInput strong{font-weight:700}.loginOverlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(20,27,32,.56);padding:24px}.loginBox{width:min(380px,calc(100vw - 40px));display:grid;gap:14px;padding:22px;border-radius:8px;background:#fff;box-shadow:0 18px 55px rgba(0,0,0,.25)}.loginBox h2{font-size:24px}.loginBox label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:700}.loginError{min-height:18px;color:var(--danger);font-size:13px}.userBox{display:grid;gap:8px;margin-bottom:20px}.userBoxTitle{color:#b9c4c9;font-size:13px}.currentUser{font-weight:700;color:#fff}.logoutBtn{min-height:34px;padding:0 10px;border-radius:8px;background:#313d44;color:#fff;text-align:left}.logoutBtn:hover{background:#40505a}.nav{display:grid;gap:8px}.navBtn{min-height:42px;padding:0 12px;border-radius:8px;background:transparent;color:#dce5e9;text-align:left}.navBtn.active,.navBtn:hover{background:#313d44;color:#fff}.main{padding:28px;min-width:0}.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;position:relative}.topActions{display:flex;align-items:center;gap:10px}.notifyBtn{position:relative;min-height:42px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700}.notifyBtn.iconOnly{width:42px;padding:0;font-size:18px}.notifyCount{position:absolute;right:-6px;top:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:12px;display:grid;place-items:center}.notifyPanel{position:absolute;right:0;top:54px;width:min(390px,calc(100vw - 40px));z-index:30;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 16px 45px rgba(31,42,50,.18);padding:10px}.notificationList{display:grid;gap:8px;margin-top:12px}.notificationItem{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;width:100%}button.notificationItem:hover{border-color:var(--primary)}.notificationItem.unread{border-color:var(--primary);background:#f2f8f6}.notificationItem strong{font-size:14px}.notificationItem p{color:var(--muted);font-size:13px;line-height:1.35}.notificationMeta{font-size:12px;color:var(--muted)}.top h2{font-size:28px}.primary,.secondary,.danger,.upload{min-height:42px;padding:0 15px;border-radius:8px;font-weight:700}.primary{background:var(--primary);color:#fff}.primary:hover{background:var(--primaryDark)}.secondary,.upload{border:1px solid var(--line);background:#fff;color:var(--ink)}.danger{background:#f2dddd;color:var(--danger)}.toolbar{display:grid;grid-template-columns:minmax(260px,1fr) 260px auto;gap:12px;margin-bottom:16px}.bulkBar{position:fixed;right:28px;top:86px;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 12px 32px rgba(31,42,50,.16)}.bulkBar strong{font-size:14px}.selectBox{width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(31,42,50,.08)}.selectBox input{width:15px;height:15px;min-height:0;padding:0}.cardTop{position:relative;display:block}.cardSelect{position:absolute;right:0;top:0}.cardContent{min-width:0;padding-right:30px}.board{display:grid;grid-auto-flow:column;grid-auto-columns:292px;grid-template-columns:none;gap:12px;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;min-height:calc(100vh - 170px);scrollbar-width:thin}.column{height:calc(100vh - 182px);min-height:420px;border:1px solid rgba(31,42,50,.08);border-radius:8px;background:rgba(238,241,237,.84);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(31,42,50,.05)}.column.dragOver{outline:2px solid var(--primary);outline-offset:2px}.stageDrag{cursor:grab}.stageDrag:active{cursor:grabbing}.columnHead{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:0;background:var(--stage-color,#6f8fa6);color:#fff;position:sticky;top:0;z-index:1}.columnHead h3{font-size:14px;line-height:1.2;font-weight:700;color:inherit}.columnHead .count{background:rgba(255,255,255,.22);color:#fff}.count,.chip{display:inline-flex;align-items:center;min-height:21px;padding:2px 7px;border-radius:999px;background:#e7eee9;color:var(--primaryDark);font-size:11px;font-weight:700;line-height:1}.chipProduction{background:#e4f1ef;color:#12574e}.chipDate{background:#fff0d9;color:#8a4d08}.chipPerson{background:#e9edf7;color:#284a7a}.chipStage{background:#edf3e8;color:#43652f}.chipMuted{background:#eef1ed;color:#68737a}.card{border-left:1px solid var(--line)}.card.selected{outline:2px solid var(--primary);outline-offset:1px}.card.stageNew{border-left-color:#6f8fa6}.card.stagePaid{border-left-color:#2f7d57}.card.stageProduction{border-left-color:#c47b2c}.card.stageReady{border-left-color:#6c62a8}.card.stageDone{border-left-color:#69737a}.sectionGrid{display:grid;gap:12px}.techSection{border:1px solid var(--line);border-radius:8px;background:#fafbf9;overflow:hidden}.techSection h4{margin:0;padding:10px 12px;background:#eef1ed;font-size:14px}.techRows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}.techRow{display:grid;grid-template-columns:145px 1fr;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);min-height:38px}.techRow:nth-last-child(-n+2){border-bottom:0}.techKey{color:var(--muted);font-size:12px;font-weight:700}.techValue{font-weight:700}.workList{display:grid;gap:8px;padding:12px}.workItem{line-height:1.38;font-weight:600}.workItem.numbered{display:grid;grid-template-columns:28px 1fr;gap:8px}.workNum{color:var(--muted);font-weight:700}.techRows.singleCol{grid-template-columns:1fr}.techRows.singleCol .techRow{grid-template-columns:170px 1fr}.techSection.listOnly .workList{background:#fff}.emptyNote{padding:12px;color:var(--muted);font-size:13px}.cards{display:grid;align-content:start;gap:8px;padding:9px;flex:1;min-height:160px;overflow-y:auto;scrollbar-width:thin}.card{display:grid;gap:7px;padding:10px 10px 9px;border:1px solid rgba(31,42,50,.10);border-radius:8px;background:#fff;text-align:left;box-shadow:0 6px 18px rgba(31,42,50,.07);transition:none}.card:hover{border-color:var(--primary);box-shadow:0 6px 18px rgba(31,42,50,.07);background:#f6fbf9}.card[draggable="true"]{cursor:grab}.card[draggable="true"]:active{cursor:grabbing}.cardNumber{display:block;color:var(--muted);font-size:11px;font-weight:600;margin-top:3px}.leadCreated{display:block;margin-top:4px;color:#899399;font-size:11px;font-weight:400}.card h4{margin:0;font-size:14px;line-height:1.18;font-weight:700}.card p{margin:2px 0 0;color:var(--muted);font-size:12px;line-height:1.25}.techPreview{display:grid;gap:6px;margin-top:4px}.techPreviewLine{display:grid;grid-template-columns:105px 1fr;gap:6px;font-size:12px;color:var(--muted)}.techPreviewLine b{color:var(--ink)}.cardMeta{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}.cardFooter{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;margin-right:-30px}.cardFooter .cardActions{margin-top:0;min-width:0}.cardFooter .chipPerson{max-width:52%;overflow:hidden;text-overflow:ellipsis;margin-left:auto;justify-self:end}.productionTimers{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}.timerChip{display:inline-flex;align-items:flex-start;flex-direction:column;gap:2px;min-height:22px;padding:4px 8px;border-radius:8px;font-size:11px;font-weight:700;line-height:1.15;max-width:100%}.timerChip small{display:block;font-size:11px;font-weight:700;line-height:1.15}.timerWork{background:#e9edf7;color:#284a7a}.timerDue{background:#e4f1ef;color:#12574e}.timerDue.warning{background:#f2dddd;color:#8f2929}.timerDue.overdue{background:#8f2929;color:#fff}.cardActions{display:flex;gap:6px;margin-top:5px;min-width:0}.commentBadge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--danger);color:#fff;font-size:12px;font-weight:700}.cardCommentBadge{position:absolute;right:30px;top:0}.commentBtn{position:relative}.commentBtn .commentBadge{position:absolute;right:-8px;top:-8px}.commentsPanel{position:absolute;right:-330px;top:0;width:310px;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:14px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 18px 50px rgba(31,42,50,.20);z-index:5;overflow:hidden}.commentsPanel h4{margin:0}.commentsList{display:grid;align-content:start;gap:8px;overflow-y:auto;min-height:0;padding-right:2px}.commentItem{display:grid;gap:4px;padding:0;border:0;background:transparent}.commentItem .commentText{padding:8px 11px;border:1px solid var(--line);border-radius:15px;background:#fafbf9}.commentMeta{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:12px}.commentText{font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-word}.commentsComposer{display:grid;gap:8px;min-height:0}.commentTargetRow{display:grid;gap:6px;color:var(--muted);font-size:13px;font-weight:700}.commentTarget{min-height:38px}.commentAudience{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:999px;background:#eef1ed;color:#68737a;font-size:11px;font-weight:700}.commentAudience.all{background:#eef1ed;color:#68737a}.commentAudience.manager{background:#e8f3ff;color:#245d8f}.commentAudience.production{background:#e4f1ef;color:#12574e}.commentAudience.admin{background:#f2dddd;color:#8f2929}.commentAudience.user{background:#eee9fb;color:#58429a}.commentsPanel textarea{min-height:82px;max-height:130px;overflow:auto;resize:none}.commentsPanel footer{display:flex;justify-content:flex-end;gap:8px}@media(max-width:1280px){.commentsPanel{right:20px;top:20px;height:calc(100% - 40px)}}.cardDownloadBtn{min-height:28px;padding:0 9px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--primaryDark);font-size:11px;font-weight:700}.cardDownloadBtn:hover{border-color:var(--primary);background:#eef8f5}.attachmentToolbar{display:grid;grid-template-columns:minmax(180px,260px) auto 1fr;gap:8px;align-items:center}.attachmentsList{display:grid;gap:14px}.attachmentGroup{display:grid;gap:8px}.attachmentGroupTitle{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:13px;font-weight:700}.attachmentGroupActions{display:flex;align-items:center;gap:8px}.attachmentGroupBody{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-start}.attachmentGroupBody .attachmentGroupGrid{flex:0 1 auto}.attachmentGroupBody .attachmentAddBtn{flex:0 0 auto;margin-top:0}.attachmentGroupBody .attachmentGroupEmpty{margin:0 4px 0 0}.attachmentAddBtn{min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--primaryDark);font-size:12px;font-weight:700}.attachmentAddBtn:hover{border-color:var(--primary);background:#eef8f5}.attachmentGroupGrid{display:flex;flex-wrap:wrap;gap:8px;width:auto;max-width:100%}.attachmentGroupEmpty{color:var(--muted);font-size:12px;padding:8px 0}.attachmentTile{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) 62px;grid-template-rows:auto auto;gap:6px 8px;align-items:center;width:186px;min-height:78px;padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;box-shadow:0 4px 12px rgba(31,42,50,.045);overflow:hidden}.attachmentIcon{width:24px;height:30px;margin:0;border-radius:4px;background:#e4e8eb;color:#fff;display:grid;place-items:center;font-size:7px;font-weight:700;position:relative;grid-column:1;grid-row:1/3;align-self:center}.attachmentIcon:before{content:"";position:absolute;right:0;top:0;border-top:1px solid var(--line);border-left:7px solid transparent}.attachmentIcon.pdf{background:#d94b4b}.attachmentIcon.xls,.attachmentIcon.xlsx{background:#36a269}.attachmentIcon.doc,.attachmentIcon.docx{background:#4b73d9}.attachmentIcon.img{background:#7b6fd6}.attachmentName{grid-column:2;grid-row:1;color:#536069;font-size:11px;line-height:1.22;font-weight:700;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-width:100%;align-self:end}.attachmentMeta{grid-column:2;grid-row:2;color:#7c878d;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:start}.attachmentActions{grid-column:3;grid-row:1/3;display:grid;grid-template-rows:1fr 1fr;align-content:stretch;gap:6px;width:62px;justify-self:end;align-self:stretch}.attachmentActions button{width:62px;min-height:26px;padding:0 5px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#253138;font-size:10px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachmentActions .dangerMini{background:#f6e5e5;color:var(--danger);border-color:#efd0d0}.confirmDialog{width:min(390px,calc(100vw - 36px));padding:0;border:0;border-radius:10px;background:#fff;box-shadow:0 22px 70px rgba(0,0,0,.28)}.confirmDialog::backdrop{background:rgba(20,27,32,.48)}.confirmBox{display:grid;gap:16px;padding:22px}.confirmBox h3{font-size:20px}.confirmBox p{color:var(--muted);line-height:1.4}.confirmBox footer{display:flex;justify-content:flex-end;gap:10px}.confirmBox .danger{min-width:110px}.attachmentsEmpty{color:var(--muted);font-size:13px}.attachmentsBlock.hidden{display:none!important}.panel{padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}.calendarTop{display:flex;justify-content:flex-start;align-items:flex-start;gap:16px;margin-bottom:16px}.calendarNav{display:flex;align-items:center;gap:10px;margin-top:10px}.monthBtn{width:34px;height:34px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:24px;line-height:1;display:grid;place-items:center}.monthBtn:hover{background:#e8ede8}.calendarTitleBtn{min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700;text-transform:lowercase}.calendarTitleBtn:hover{background:#e8ede8}.calendarNav #monthTitle{display:inline-block;min-width:120px;text-align:left}.calendarGrid.zoomIn{animation:calendarZoom .18s ease-out}@keyframes calendarZoom{from{opacity:.35;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.calendarPick{min-height:98px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:700}.calendarPick:hover{border-color:var(--primary);background:#eef8f5}.calendarPick.current{background:var(--primary);color:#fff}.calendarPick.muted{opacity:.45}.calendarLayout{display:grid;grid-template-columns:minmax(0,1fr) 320px 360px;gap:16px;align-items:start}.calendarGrid{display:grid;grid-template-columns:repeat(7,minmax(74px,1fr));gap:7px}.calendarDayName{color:var(--muted);font-size:12px;font-weight:700;padding:0 6px}.calendarDay{min-height:78px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left}.calendarDay.otherMonth{opacity:.45}.calendarDay.today{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}.calendarDay.selected{background:#eef8f5}.calendarDate{font-weight:700}.calendarNoteBadge{display:inline-flex;margin-top:8px;padding:3px 7px;border-radius:999px;background:#fff0d9;color:#8a4d08;font-size:12px;font-weight:700}.calendarNoteBadge.info{background:#e9edf7;color:#284a7a}.calendarNoteBadge.important{background:#f2dddd;color:#8f2929}.calendarOrderBadge{display:inline-flex;margin-top:8px;margin-left:4px;padding:3px 7px;border-radius:999px;background:#e4f1ef;color:#12574e;font-size:12px;font-weight:700}.calendarTaskBadge{display:inline-flex;margin-top:8px;margin-left:4px;padding:3px 7px;border-radius:999px;background:#eee9fb;color:#58429a;font-size:12px;font-weight:700}.dayTask{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:8px;background:#fff}.dayTask.done{opacity:.72;background:#fafbf9}.dayTask.done .dayTaskText{text-decoration:line-through;color:var(--muted)}.dayTaskTop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.taskCheck{display:flex;align-items:flex-start;gap:8px;font-weight:700;font-size:13px;line-height:1.35}.taskCheck input{width:18px;height:18px;min-height:0;padding:0;flex:0 0 auto}.dayTaskText{font-size:13px;line-height:1.38;white-space:pre-wrap;overflow-wrap:anywhere}.taskMeta{color:var(--muted);font-size:12px}.taskComments{display:grid;gap:6px}.taskComment{display:grid;gap:3px;padding:7px 9px;border-radius:8px;background:#f4f7f4}.taskComment span{color:var(--muted);font-size:11px}.taskComment p{font-size:12px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}.taskCommentForm{display:grid;gap:6px}.taskCommentForm textarea{min-height:56px;resize:none}.taskCreate{display:grid;gap:8px;margin:10px 0 18px;padding:10px;border:1px dashed var(--line);border-radius:8px;background:#fafbf9}.taskCreate textarea{min-height:70px;resize:none}.taskCreate select{min-height:86px}.taskDeleteBtn{min-height:30px;padding:0 9px;border-radius:7px;background:#f2dddd;color:var(--danger);font-size:12px;font-weight:700}.calendarTasksDetails{margin:8px 0 16px;border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden}.calendarTasksDetails summary{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;font-weight:700;cursor:pointer}.calendarTasksDetails[open] summary{border-bottom:1px solid var(--line);background:#fafbf9}.calendarTaskMini{display:grid;gap:4px;padding:10px 12px;border-bottom:1px solid var(--line)}.calendarTaskMini:last-child{border-bottom:0}.calendarTaskMini.done{opacity:.65}.calendarTaskMini strong{font-size:13px}.calendarTaskMini p{color:var(--muted);font-size:12px;line-height:1.35}.userPicker{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;max-height:220px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:8px;background:#fafbf9}.userPick{display:flex;align-items:center;gap:8px;min-height:36px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-weight:700;color:var(--ink);cursor:pointer}.userPick input{width:16px;height:16px;min-height:0;padding:0}.userPick:hover{border-color:#9db8b2;background:#f4faf8}.userPick:has(input:checked){border-color:var(--primary);background:#eef8f5;color:var(--primaryDark)}.taskBoard{display:grid;grid-auto-flow:column;grid-auto-columns:310px;gap:12px;overflow-x:auto;padding:2px 2px 12px;min-height:calc(100vh - 135px)}.taskColumn{display:flex;flex-direction:column;height:calc(100vh - 148px);min-height:520px;border:1px solid var(--line);border-radius:8px;background:#eef2ef;overflow:hidden}.taskColumn.dragOver{outline:2px solid var(--primary);outline-offset:-2px;background:#e5f3ef}.taskColumnHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;color:#fff;font-weight:800}.taskColumnHead .count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.23);font-size:13px}.taskCards{display:grid;align-content:start;gap:8px;min-height:0;overflow:auto;padding:10px}.taskCard{display:grid;gap:8px;padding:11px;border:1px solid var(--line);border-radius:8px;background:#fff;box-shadow:0 8px 18px rgba(31,42,50,.06);cursor:grab}.taskCard:hover{border-color:var(--primary);box-shadow:0 10px 22px rgba(31,42,50,.08)}.taskCard:active{cursor:grabbing}.taskCard.done{opacity:.82}.taskCard h3{font-size:14px;line-height:1.25;font-weight:700}.taskCard.done h3{text-decoration:line-through;color:var(--muted)}.taskCardDesc{font-size:13px;line-height:1.35;color:#44525b;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.taskCardMeta{display:flex;flex-wrap:wrap;gap:6px}.taskCardActions{display:flex;align-items:center;justify-content:space-between;gap:8px}.taskCardComments{border-top:1px solid var(--line);padding-top:8px}.taskCardComments summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:700}.taskCommentBox{display:grid;gap:7px;margin-top:8px}.taskCommentBox textarea{min-height:54px;resize:none}.taskCommentBox button{min-height:34px}.taskComments{display:grid;gap:6px;margin-top:8px}.taskComment{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:#fafbf9}.taskComment span{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}.taskComment p{font-size:13px;line-height:1.35;white-space:pre-wrap;overflow-wrap:anywhere}.taskDeleteBtn{min-height:32px;padding:0 10px;border-radius:8px;border:1px solid #efd4d4;background:#f6dddd;color:#a33d3d;font-weight:800}.taskEmpty{padding:14px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);background:#fff}.taskCheck{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:700}.taskCheck input{width:16px;height:16px;min-height:0;padding:0}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.taskDialogComments{display:grid;gap:8px;padding-top:6px;border-top:1px solid var(--line)}.taskDialogComments.hidden{display:none}.taskDialogComments h4{font-size:15px}.taskDialogComments .taskComments{max-height:180px;overflow:auto}.dayOrder{display:grid;gap:4px;padding:10px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:8px;background:#fff;text-align:left}.dayOrder strong{font-size:13px}.dayOrder p{font-size:13px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.calendarDuePanel{align-self:start;max-height:calc(100vh - 180px);overflow:auto}.calendarDueList{display:grid;gap:8px;margin-top:12px}.calendarDueItem{display:grid;gap:6px;padding:11px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:8px;background:#fff;text-align:left}.calendarDueItem:hover{border-color:var(--primary)}.calendarDueItem.overdue{border-left-color:var(--danger);background:#fffafa}.calendarDueItem.soon{border-left-color:#d58a20;background:#fffaf2}.calendarDueItem strong{font-size:13px;line-height:1.25}.calendarDueItem p{font-size:12px;color:var(--muted);line-height:1.3}.calendarDueMeta{display:flex;flex-wrap:wrap;gap:5px}.calendarDueChip{display:inline-flex;width:max-content;padding:4px 7px;border-radius:999px;background:#e4f1ef;color:#12574e;font-size:12px;font-weight:700}.calendarDueChip.overdue{background:#9f2d2d;color:#fff}.calendarDueChip.soon{background:#f3dddd;color:#9f2d2d}.dayNotesList{display:grid;gap:8px;margin:12px 0}.dayNote{display:grid;gap:5px;padding:10px;border:1px solid var(--line);border-left-width:1px;border-radius:8px;background:#fff;text-align:left}.dayNote.info{border-left-color:#335f8f}.dayNote.important{border-left-color:#a33d3d}.dayNote strong{font-size:13px}.dayNote p{font-size:13px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;overflow-wrap:anywhere}.noteDialogForm{display:grid;gap:14px;padding:20px}.noteDialogForm header,.noteDialogForm footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.noteDialogForm label{display:grid;gap:8px;color:var(--muted);font-size:13px;font-weight:700}.noteDialogForm textarea{min-height:180px}.calendarEditor{align-self:start}.calendarEditor label{display:grid;gap:8px;color:var(--muted);font-size:13px;font-weight:700}.panel h3{margin-bottom:8px}.upload{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;cursor:pointer}.upload input,.fileLike input{display:none}.parseResult{margin-top:16px;padding:14px;border-radius:8px;background:#eef5f2;color:var(--primaryDark)}.twoCols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.threeCols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.stageEditor{display:grid;gap:8px;margin:14px 0}.companyGrid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(520px,1.4fr);gap:16px}.chatShell{display:grid;grid-template-columns:190px minmax(440px,560px) minmax(420px,1fr);gap:12px;height:calc(100vh - 120px);min-height:0}.chatTabs{display:grid;align-content:start;gap:8px;padding:8px;border-radius:8px;background:var(--side);color:#fff;min-height:0}.chatTab{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:0 10px;border-radius:8px;background:transparent;color:#dce5e9;text-align:left;font-weight:700;white-space:normal}.chatTab span{min-width:0;overflow-wrap:anywhere}.chatTab:hover,.chatTab.active{background:#313d44;color:#fff}.chatTab b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#e7eee9;color:var(--primaryDark);font-size:12px;flex:0 0 auto}.chatListPanel,.chatDetail{height:100%;min-height:0;overflow:hidden}.chatListPanel{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:10px}.chatDetail{display:grid;min-width:0;padding:0;overflow:hidden}.chatListHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.chatFeed,.chatList,.chatMembers{display:grid;gap:8px}.chatList{align-content:start;overflow:auto;padding-right:4px;min-height:0}.chatItem,.chatRoom{display:grid;gap:6px;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left}.chatItem:hover,.chatRoom:hover{border-color:var(--primary)}.chatItem.active,.chatRoom.active{border-color:var(--primary);background:#f2f8f6}.chatItem strong,.chatRoom strong{font-size:14px;line-height:1.25}.chatMeta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px}.chatText{font-size:13px;line-height:1.4;white-space:pre-wrap;word-break:break-word}.chatComposer{display:grid;gap:6px;margin:0;padding:8px 14px 10px;border-top:1px solid rgba(31,42,50,.10);background:rgba(255,255,255,.96);align-self:end;position:relative;bottom:auto;z-index:2}.chatComposer textarea,#chatMessageText,#chatOrderCommentText{height:64px!important;min-height:64px!important;max-height:64px!important;resize:none!important;overflow:auto}.chatComposer .primary,#sendChatMessageBtn,#sendOrderCommentBtn{min-height:38px!important;height:38px!important;padding:0 16px}.chatCreateBox{border-top:1px solid var(--line);padding-top:10px}.chatCreateBox .secondary{width:100%}.chatThreadPanel{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:0;min-height:0;height:100%;overflow:hidden;background:#dfe9c7;background-image:linear-gradient(135deg,rgba(255,255,255,.28) 25%,transparent 25%),linear-gradient(315deg,rgba(255,255,255,.20) 25%,transparent 25%);background-size:34px 34px;background-position:0 0,17px 17px}.chatThreadPanel#orderCommentsPanel{grid-template-rows:auto minmax(0,1fr) auto}.chatThreadPanel>.sectionTitle{padding:16px 18px;border-bottom:1px solid rgba(31,42,50,.10);background:#fff}.chatMemberTools{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0;padding:10px 14px;background:#fff}.chatMembers{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 14px;background:#fff;border-bottom:1px solid rgba(31,42,50,.08)}.chatMembers.collapsed .memberChip,.chatMembers.collapsed .chatMemberToolsInline{display:none}.memberToggle{min-height:30px;padding:0 10px;border-radius:999px;background:#eef1ed;color:var(--ink);font-size:13px;font-weight:700}.chatMessages{display:flex;flex-direction:column;gap:7px;align-content:start;overflow:auto;min-height:0;height:100%;padding:18px;background:transparent}.chatMessage{display:grid;max-width:min(72%,660px);padding:0;background:transparent;border:0;box-shadow:none;text-align:left;position:relative}.chatMessage.theirs{align-self:flex-start}.chatMessage.own{align-self:flex-end}.chatBubble{display:grid;gap:6px;padding:8px 10px 7px;border:1px solid rgba(31,42,50,.08);border-radius:18px;background:#fff;box-shadow:0 2px 8px rgba(31,42,50,.08)}.chatMessage.theirs .chatBubble{border-top-left-radius:6px}.chatMessage.own .chatBubble{background:#e8ffd8;border-top-right-radius:6px}.chatBubbleHead{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:220px}.chatBubbleHead strong{font-size:13px;line-height:1.15;color:var(--ink)}.chatMessage.own .chatBubbleHead{flex-direction:row-reverse}.chatMessage .chatText{font-size:15px;line-height:1.35;white-space:pre-wrap;word-break:break-word}.chatMessage .chatTime{justify-self:end;color:#7b8990;white-space:nowrap;font-size:12px;line-height:1}.chatMessage.own .chatTime{color:#4d9a52}.chatMessage .commentAudience{width:max-content;max-width:100%}.memberChip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:3px 7px;border-radius:999px;background:#eef1ed;color:var(--ink);font-size:12px;font-weight:700}.memberChip button{width:18px;height:18px;border-radius:999px;background:#f2dddd;color:var(--danger);font-size:11px}.chatEmpty,.chatEmptyState{color:var(--muted);font-size:13px;line-height:1.4}.chatEmptyState{display:grid;place-content:center;text-align:center;gap:6px;height:100%;background:#dfe9c7}.chatEmptyState strong{color:var(--ink);font-size:18px}.chatDetail .hidden{display:none!important}@media(max-width:1200px){.chatShell{grid-template-columns:170px minmax(380px,460px) minmax(360px,1fr)}}.departmentList,.userList{display:grid;gap:8px;margin-top:14px}.departmentRow{display:grid;grid-template-columns:1fr 38px;gap:8px}.userRow{display:grid;grid-template-columns:1.1fr .9fr .9fr .9fr .9fr 38px;gap:8px;align-items:center}.userRow input,.userRow select,.departmentRow input{min-height:38px}.prototypeNote{margin-top:12px;padding:12px;border-radius:8px;background:#fff7e8;color:#7a4a08;font-size:13px;line-height:1.4}.stageRow{display:grid;grid-template-columns:1fr 44px 38px;gap:8px;align-items:center}.stageColor{width:44px;height:38px;min-height:38px;padding:3px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}.iconBtn{width:38px;height:38px;border-radius:8px;background:#f2dddd;color:var(--danger);font-weight:700}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.fileLike{display:inline-flex;align-items:center;cursor:pointer}dialog{width:min(900px,calc(100vw - 28px));max-height:calc(100vh - 60px);border:0;border-radius:8px;padding:0;box-shadow:0 18px 50px rgba(31,42,50,.18);overflow:visible;position:relative;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .18s ease,transform .18s ease}dialog[open]{opacity:1;transform:translateY(0) scale(1)}dialog.closing{opacity:0;transform:translateY(10px) scale(.985)}dialog::backdrop{background:rgba(20,27,32,.48);transition:background .18s ease}dialog.closing::backdrop{background:rgba(20,27,32,0)}.saveToast{position:fixed;right:28px;bottom:28px;z-index:99999;display:none;align-items:center;gap:10px;min-height:46px;padding:0 16px;border:1px solid #b9ddd1;border-radius:8px;background:#eef8f5;color:#12574e;font-weight:700;box-shadow:0 16px 40px rgba(31,42,50,.18);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease}.saveToast.show{opacity:1;transform:translateY(0)}.saveToastMark{display:grid;place-items:center;width:22px;height:22px;border-radius:999px;background:#1f6b5f;color:#fff;font-size:14px}.orderForm{display:grid;gap:14px;padding:20px;max-height:calc(100vh - 60px);overflow-y:auto;position:static}.orderForm header,.orderForm footer{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}.footerActions{display:grid;gap:8px;justify-items:end}.footerSaveRow{display:flex;gap:8px}.orderForm label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:700}.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chassisGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:8px}.fieldTools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}.fieldTools h4{margin:0}.schemaEditor{display:grid;gap:8px;margin:8px 0 12px;padding:12px;border:1px dashed var(--line);border-radius:8px;background:#fafbf9}.schemaRow{display:grid;grid-template-columns:1fr 34px 34px 34px;gap:8px}.smallBtn{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff;font-weight:700}.smallBtn.dangerMini{background:#f2dddd;color:var(--danger)}.descriptionBar{display:flex;justify-content:space-between;align-items:center;gap:12px}.commentOpenBtn{background:#e8f3ff;border-color:#b7d7f4;color:#245d8f}.commentOpenBtn:hover{background:#dcecff;border-color:#8fc1ee}.technicalBlock{display:grid;gap:18px;margin-bottom:18px}.orderSection{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;background:#fafbf9}.orderSection label{margin:0}.historyBlock{margin-top:18px}.historyList{display:grid;gap:8px}.historyItem{display:grid;gap:4px;padding:9px 10px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:8px;background:#fff}.historyTop{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}.historyItem strong{font-size:13px}.historyChange{font-size:13px;line-height:1.35;color:var(--ink);word-break:break-word}.historyEmpty{color:var(--muted);font-size:13px}.historyToggle{min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--primaryDark);font-size:12px;font-weight:700}.historyToggle.hidden{display:none}.sectionTitle{display:flex;justify-content:space-between;align-items:center;gap:12px}.sectionTitle h4{margin:0;font-size:14px}.sectionHint{color:var(--muted);font-size:12px}.downloadBtn{margin-left:auto}.dialogTitleRow{display:flex;align-items:center;gap:10px;min-width:0}.dialogTitleRow h3{white-space:nowrap}.hidden{display:none!important}@media(max-width:860px){.layout,.toolbar,.twoCols,.formGrid,.companyGrid,.chatLayout{grid-template-columns:1fr}.main{padding:20px}.board{grid-auto-columns:86vw;min-height:560px}.column{height:560px}} .userCreateForm{width:min(520px,calc(100vw - 36px));display:grid;gap:14px;padding:20px}.userCreateForm header,.userCreateForm footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.userCreateForm label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:700}.userStatus{display:inline-flex;align-items:center;min-height:24px;padding:3px 8px;border-radius:999px;background:#e4f1ef;color:#12574e;font-size:11px;font-weight:700}.userStatus.off{background:#f2dddd;color:#8f2929}.userRow.serverUser{grid-template-columns:minmax(150px,1.2fr) minmax(120px,.8fr) minmax(150px,1fr) minmax(150px,1fr) minmax(150px,1fr) auto auto;align-items:center}.adminPasswordInput{-webkit-text-security:disc;text-security:disc}.toolbarSearch{height:42px!important;min-height:42px!important;max-height:42px!important;padding:9px 12px!important;resize:none!important;overflow:hidden!important;white-space:nowrap;line-height:22px} /* Product polish pass inspired by taste-skill + impeccable: restrained internal CRM, dense but calm. */ :root{ --bg:#f5f7f4; --panel:#ffffff; --panelSoft:#f8faf7; --ink:#152126; --muted:#5f6b72; --muted2:#7a858b; --line:#dce3de; --lineStrong:#c8d2cc; --side:#1d272d; --sideHover:#2d3a42; --primary:#176f63; --primaryDark:#11544b; --primarySoft:#e8f4f1; --accent:#d38a2f; --danger:#a33b3b; --warning:#a76416; --success:#217a54; --info:#2f6697; --radius:8px; --shadow-xs:0 1px 2px rgba(21,33,38,.06); --shadow-sm:0 3px 8px rgba(21,33,38,.08); --shadow-md:0 8px 18px rgba(21,33,38,.10); --focus:0 0 0 3px rgba(23,111,99,.16); } .adminPanelAccess{grid-column:1/-1;margin-top:12px} .accessTableWrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff} .accessRightsTable{width:100%;border-collapse:collapse;min-width:980px;font-size:13px} .accessRightsTable th,.accessRightsTable td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle} .accessRightsTable th:first-child,.accessRightsTable td:first-child{text-align:left;position:sticky;left:0;background:#fff;z-index:1;font-weight:650;color:var(--ink)} .accessRightsTable th{background:#f4f8f6;color:var(--muted);font-weight:700} .accessRightsTable tr:last-child td{border-bottom:0} .accessToggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:24px;cursor:pointer} .accessToggle input{position:absolute;opacity:0;pointer-events:none} .accessToggle span{width:30px;height:18px;border-radius:999px;background:#dfe7e3;position:relative;box-shadow:inset 0 0 0 1px rgba(15,45,38,.08);transition:.16s ease} .accessToggle span:before{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.16s ease} .accessToggle input:checked+span{background:var(--green)} .accessToggle input:checked+span:before{transform:translateX(12px)} .accessToggle input:disabled+span{opacity:.5;cursor:default} html{scrollbar-gutter:stable}body{background:var(--bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:15px;letter-spacing:0;text-rendering:geometricPrecision}.layout{grid-template-columns:260px minmax(0,1fr)}.side{background:linear-gradient(180deg,#1b252b 0%,#202b31 100%);border-right:1px solid rgba(255,255,255,.06);padding:22px 18px}.brand{margin-bottom:22px}.brandIcon{width:44px;height:44px;border-radius:var(--radius);background:#d18a2c;box-shadow:var(--shadow-xs)}.brand h1{font-size:19px;line-height:1.15}.brand p,.muted{color:var(--muted);line-height:1.35}.side .muted,.side .brand p,.userBoxTitle{color:#b7c2c8}.currentUser{font-weight:750}.logoutBtn,.navBtn{border-radius:var(--radius);transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}.nav{gap:7px}.navBtn{min-height:40px;padding:0 11px;color:#dce5e8;font-weight:650}.navBtn.active{background:#34424a;color:#fff;box-shadow:inset 3px 0 0 #d18a2c}.navBtn:hover{background:var(--sideHover);color:#fff}.main{padding:24px 26px}.top{margin-bottom:18px}.top h2{font-size:28px;line-height:1.1;font-weight:780;letter-spacing:-.015em;text-wrap:balance}.top .muted{font-size:13px;color:#607078}button,input,select,textarea,.richInput{border-radius:var(--radius)}input,select,textarea,.richInput{border-color:var(--lineStrong);background:#fff;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}input:hover,select:hover,textarea:hover,.richInput:hover{border-color:#aebcb5}input:focus,select:focus,textarea:focus,.richInput:focus{outline:0;border-color:var(--primary);box-shadow:var(--focus)}input::placeholder,textarea::placeholder{color:#68767d;opacity:1}.primary,.secondary,.danger,.upload,.notifyBtn,.taskDeleteBtn{border-radius:var(--radius);transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .08s ease,box-shadow .16s ease}.primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-xs)}.primary:hover{background:var(--primaryDark);box-shadow:var(--shadow-sm)}.secondary,.upload,.notifyBtn{border:1px solid var(--lineStrong);background:#fff;color:var(--ink)}.secondary:hover,.upload:hover,.notifyBtn:hover{border-color:#aebcb5;background:#f8fbf9}.danger,.taskDeleteBtn{background:#f5e2e2;color:#963333;border:1px solid #edcbcb}.danger:hover,.taskDeleteBtn:hover{background:#efd2d2}button:active{transform:translateY(1px)}button:focus-visible,.navBtn:focus-visible,.selectBox:focus-visible{outline:0;box-shadow:var(--focus)}.toolbar{gap:10px;margin-bottom:14px}.toolbarSearch{min-height:44px;padding:10px 14px;line-height:1.35}.board{grid-auto-columns:286px;gap:10px;min-height:calc(100vh - 165px);padding-bottom:10px}.column{height:calc(100vh - 178px);border-color:var(--line);border-radius:var(--radius);background:#eef3ef;box-shadow:none}.columnHead{min-height:42px;padding:10px 12px;align-items:center}.columnHead h3{font-size:13px;font-weight:760}.columnHead .count,.taskColumnHead .count{min-width:22px;height:22px;font-size:12px}.cards{gap:8px;padding:8px}.card{gap:7px;padding:10px;border:1px solid var(--line);border-left-width:1px!important;border-radius:var(--radius);box-shadow:var(--shadow-xs);background:#fff;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .08s ease}.card:hover{border-color:#91b6ad;background:#fbfdfc;box-shadow:var(--shadow-sm)}.card.selected{outline:2px solid rgba(23,111,99,.28);outline-offset:1px}.card h4{font-size:13.5px;line-height:1.22;font-weight:760;letter-spacing:-.005em}.card p,.cardNumber,.leadCreated{color:var(--muted);font-weight:500}.cardMeta,.productionTimers,.cardActions{gap:5px}.chip,.count,.timerChip,.calendarDueChip,.commentAudience{border-radius:999px;font-size:11px;font-weight:760}.chipProduction,.timerDue{background:var(--primarySoft);color:#11584f}.chipDate{background:#fff1dd;color:#83500f}.chipPerson{background:#edf2fb;color:#2f527d}.chipStage{background:#eef5e9;color:#446d33}.chipMuted{background:#eef2ef;color:#627079}.timerChip{border-radius:7px;box-shadow:none}.timerDue.overdue{background:#963333;color:#fff}.timerDue.warning{background:#f4dfdf;color:#8c2e2e}.timerWork{background:#edf2fb;color:#2f527d}.cardFooter{align-items:flex-end}.bulkBar,.notifyPanel,.modal,.loginBox,.commentsPanel,.panel,.calendarEditor,.calendarDuePanel{border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md)}dialog{border:0;border-radius:10px;box-shadow:0 18px 40px rgba(21,33,38,.18)}dialog::backdrop{background:rgba(21,33,38,.46)}.orderModal{border-radius:10px}.orderForm{gap:12px}.orderForm label,.noteDialogForm label,.taskComposer label{font-size:13px;color:var(--muted);font-weight:760}.formGrid{gap:12px}.techSection,.fileSection,.historyBox{border-color:var(--line);border-radius:var(--radius);background:#fbfcfb}.techSection h4{background:#eef3ef}.techRows{border-top-color:var(--line)}.techRow{border-bottom-color:var(--line);gap:10px}.richInput{background:#fff;line-height:1.58}.fileCard{border-color:var(--line);box-shadow:var(--shadow-xs)}.fileCard:hover{box-shadow:var(--shadow-sm);border-color:#aebcb5}.calendarLayout{gap:14px}.calendarGrid{gap:8px}.calendarDay{border-color:var(--line);border-radius:var(--radius);box-shadow:none;background:#fff}.calendarDay:hover{border-color:#aebcb5}.calendarDay.selected{border-color:var(--primary);box-shadow:var(--focus)}.calendarDueItem,.dayOrder,.dayNote{border-color:var(--line);border-left-width:1px!important;box-shadow:var(--shadow-xs)}.calendarDueItem:hover,.dayOrder:hover,.dayNote:hover{border-color:#91b6ad}.chatShell{gap:12px}.chatTabs,.chatListPanel,.chatThreadPanel{border-radius:var(--radius);border-color:var(--line);box-shadow:none}.chatTab{border-radius:var(--radius);transition:background-color .16s ease,color .16s ease}.chatTab.active{background:#34424a;color:#fff}.chatConversationItem{border-color:var(--line);border-radius:var(--radius);box-shadow:none}.chatConversationItem:hover,.chatConversationItem.active{border-color:#91b6ad;background:#f6fbf9}.chatMessages,.groupMessages{background-color:#eaf2dc}.messageBubble{border-radius:14px;box-shadow:var(--shadow-xs)}.messageBubble.own{background:#dcffd2}.messageBubble.other{background:#fff}.chatComposer,.orderCommentComposer{border-top-color:var(--line);background:#fff}.taskBoard{grid-auto-columns:304px;gap:10px;min-height:calc(100vh - 135px)}.taskColumn{height:calc(100vh - 148px);border-color:var(--line);border-radius:var(--radius);background:#eef3ef}.taskColumnHead{min-height:42px;padding:10px 12px}.taskCards{gap:8px;padding:8px}.taskCard{border-color:var(--line);border-radius:var(--radius);box-shadow:var(--shadow-xs);transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}.taskCard:hover{border-color:#91b6ad;background:#fbfdfc;box-shadow:var(--shadow-sm)}.taskCard h3{font-size:14px;font-weight:760;letter-spacing:-.005em}.taskCardDesc{color:#39484f}.taskCardComments summary{padding:2px 0}.taskComment{border-color:var(--line);background:#fbfcfb}.userPicker{gap:8px;border-color:var(--lineStrong);background:#f8faf7}.userPick{border-color:var(--line);border-radius:var(--radius);font-weight:680;background:#fff}.userPick:hover{border-color:#91b6ad;background:#f6fbf9}.userPick:has(input:checked){border-color:var(--primary);background:var(--primarySoft);color:var(--primaryDark)}.selectBox{border-color:var(--lineStrong);box-shadow:var(--shadow-xs)}.selectBox:hover{border-color:#91b6ad;background:#f6fbf9}.notifyPanel{padding:10px}.notificationItem{border-color:var(--line);border-radius:var(--radius)}.notificationItem.unread{border-color:#91b6ad;background:var(--primarySoft)}.payrollFrame{border-color:var(--line);border-radius:var(--radius);box-shadow:none}.stageColor{border-radius:999px}.loginOverlay{background:rgba(21,33,38,.56)}.loginBox{box-shadow:0 18px 40px rgba(21,33,38,.22)}.loginBox h2{font-size:23px;letter-spacing:-.01em}.fieldErrorText,.loginError{color:#963333}.hidden{display:none!important}@media (max-width:900px){.layout{grid-template-columns:1fr}.side{position:static}.main{padding:18px}.toolbar{grid-template-columns:1fr}.board,.taskBoard{grid-auto-columns:minmax(280px,86vw)}.calendarLayout,.chatShell{grid-template-columns:1fr}.formGrid{grid-template-columns:1fr}.top{align-items:flex-start}.topActions{flex-wrap:wrap;justify-content:flex-end}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}} /* Visual redesign v2: more distinct CRM shell, clearer affordances, richer stage language. */ :root{ --bg:#eef3f1; --panel:#ffffff; --panelSoft:#f7faf8; --ink:#121c22; --muted:#596870; --line:#d2ddd8; --lineStrong:#b9c8c1; --side:#152027; --side2:#21303a; --primary:#11695f; --primaryDark:#0b4e47; --primarySoft:#dff1ed; --accent:#d18427; --accentSoft:#fff0da; --danger:#a4343a; --info:#2c6698; --radius:9px; --stage-blue:#3f92e8; --stage-green:#24a66b; --stage-orange:#e59a2f; --stage-violet:#7364d8; --stage-gray:#65727b; --shadow-xs:0 1px 2px rgba(18,28,34,.07); --shadow-sm:0 5px 14px rgba(18,28,34,.10); --shadow-md:0 14px 32px rgba(18,28,34,.14); } body{background:radial-gradient(circle at 18% -8%,rgba(17,105,95,.13),transparent 34%),linear-gradient(180deg,#f6f8f5 0%,#eef3f1 46%,#eaf0ed 100%);color:var(--ink)}.layout{grid-template-columns:268px minmax(0,1fr)}.side{background:linear-gradient(180deg,var(--side) 0%,#1d2a32 58%,#172229 100%);box-shadow:inset -1px 0 0 rgba(255,255,255,.06);padding:22px 16px}.brand{padding:8px 6px 18px;margin-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}.brandIcon{width:46px;height:46px;background:linear-gradient(135deg,#e39a35,#bc6d1f);box-shadow:0 8px 18px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.18);font-size:15px}.brand h1{font-size:20px}.userBox{padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);background:rgba(255,255,255,.045);margin-bottom:18px}.logoutBtn{background:#2b3942;border:1px solid rgba(255,255,255,.08)}.logoutBtn:hover{background:#354650}.nav{gap:6px}.navBtn{position:relative;display:flex;align-items:center;gap:10px;min-height:42px;padding:0 12px 0 10px;font-weight:720}.navBtn::before{content:"";display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.08);color:#dfe9ec;font-size:14px;font-weight:900;line-height:1;flex:0 0 auto}.navBtn[data-screen="orders"]::before{content:"▦"}.navBtn[data-screen="calendar"]::before{content:"□"}.navBtn[data-screen="tasks"]::before{content:"✓"}.navBtn[data-screen="chat"]::before{content:"◌"}.navBtn[data-screen="company"]::before{content:"⌂"}.navBtn[data-screen="stages"]::before{content:"≡"}.navBtn[data-screen="backup"]::before{content:"↥"}.navBtn[data-screen="payroll"]::before{content:"₽"}.navBtn.active{background:linear-gradient(90deg,#33444e,#2b3942);box-shadow:inset 3px 0 0 var(--accent),0 5px 14px rgba(0,0,0,.12)}.navBtn.active::before{background:var(--accent);color:#fff}.main{padding:24px 28px}.top{padding:2px 0 10px;border-bottom:1px solid rgba(18,28,34,.07);margin-bottom:18px}.top h2{font-size:30px;font-weight:820}.primary{background:linear-gradient(180deg,#16776b,#0f6259);border:1px solid rgba(5,62,55,.18);box-shadow:0 7px 16px rgba(18,28,34,.12)}.primary:hover{background:linear-gradient(180deg,#126d63,#0b5049);box-shadow:0 9px 20px rgba(18,28,34,.15)}.primary::before{margin-right:6px}.topActions .primary::before,#taskAddTopBtn::before{content:"+";font-weight:900}.notifyBtn{box-shadow:var(--shadow-xs)}.notifyBtn:hover{box-shadow:var(--shadow-sm)}.toolbar{align-items:center}.toolbarSearch{background:#fff;border-color:#bfcdc7;box-shadow:var(--shadow-xs)}.toolbarSearch:focus{box-shadow:0 0 0 3px rgba(18,28,34,.10),0 8px 22px rgba(18,28,34,.08)}.board,.taskBoard{gap:12px}.column,.taskColumn{background:rgba(255,255,255,.46);border-color:rgba(18,28,34,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 8px 22px rgba(18,28,34,.05)}.columnHead,.taskColumnHead{position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.20);box-shadow:inset 0 -1px 0 rgba(0,0,0,.08)}.columnHead::after,.taskColumnHead::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 52%,rgba(255,255,255,.12));pointer-events:none}.columnHead h3,.taskColumnHead span:first-child{position:relative;z-index:1;font-weight:820}.columnHead .count,.taskColumnHead .count{position:relative;z-index:1;background:rgba(255,255,255,.28);backdrop-filter:blur(8px)}.cards,.taskCards{padding:9px}.card,.taskCard{border-color:rgba(18,28,34,.10);box-shadow:0 8px 18px rgba(18,28,34,.07);background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%)}.card:hover,.taskCard:hover{transform:translateY(-1px);border-color:#73a99e;box-shadow:0 12px 26px rgba(18,28,34,.12)}.card h4,.taskCard h3{font-size:14px;line-height:1.22;font-weight:820;color:#101a20}.cardNumber,.leadCreated{font-size:11px;color:#6b7a82}.cardContent{padding-right:32px}.selectBox{border-color:#b7c7c0;background:linear-gradient(180deg,#fff,#f5f8f6)}.selectBox:hover{border-color:#6fa79c}.chip,.count,.timerChip,.calendarDueChip,.commentAudience{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}.chipProduction,.timerDue{background:#dff2ee;color:#0c5d54}.chipDate{background:#fff0da;color:#8a510d}.chipPerson{background:#e6eefc;color:#294e83}.timerDue.overdue{background:linear-gradient(180deg,#ad3a40,#8e2a30);box-shadow:0 4px 10px rgba(18,28,34,.10);color:#fff}.timerDue.warning{background:#f7dede;color:#923137}.modal,.orderModal,dialog{border-radius:12px;box-shadow:0 24px 60px rgba(18,28,34,.24)}dialog::backdrop{background:rgba(18,28,34,.50);backdrop-filter:blur(2px)}.orderForm,.noteDialogForm{background:linear-gradient(180deg,#fff 0%,#fbfcfb 100%)}.orderForm>header,.noteDialogForm>header{padding-bottom:12px;border-bottom:1px solid var(--line)}.orderForm>footer,.noteDialogForm>footer{padding-top:12px;border-top:1px solid var(--line)}input,select,textarea,.richInput{background:#fff;border-color:#bdcbc4}.orderForm input,.orderForm select,.orderForm textarea,.noteDialogForm input,.noteDialogForm select,.noteDialogForm textarea{box-shadow:var(--shadow-xs)}label:has(input:focus),label:has(textarea:focus),label:has(select:focus){color:var(--primaryDark)}.techSection,.fileSection,.historyBox{background:linear-gradient(180deg,#ffffff,#fbfdfc);box-shadow:var(--shadow-xs)}.techSection h4{background:linear-gradient(180deg,#edf4f1,#e5efeb);border-bottom:1px solid var(--line)}.richInput{box-shadow:inset 0 1px 0 rgba(18,28,34,.03)}.fileCard{background:#fff;border-color:#d5dfda;box-shadow:0 6px 14px rgba(18,28,34,.07)}.fileCard:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(18,28,34,.10)}.chatTabs{background:#18242b}.chatTab{font-weight:800}.chatTab b{background:#edf7f4;color:#0f6259}.chatTab.active b{background:#fff;color:#0f6259}.chatListPanel,.chatThreadPanel,.panel,.calendarEditor,.calendarDuePanel{background:rgba(255,255,255,.82);border-color:rgba(18,28,34,.09);box-shadow:var(--shadow-xs)}.chatMessages,.groupMessages{background-color:#e8f1da;background-image:linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.22) 25%,transparent 25%);background-size:34px 34px}.messageBubble{box-shadow:0 3px 8px rgba(18,28,34,.10);border-radius:15px}.messageBubble.own{background:#dcffd2;border:1px solid rgba(55,145,74,.12)}.messageBubble.other{background:#fff;border:1px solid rgba(18,28,34,.08)}.calendarDay{background:linear-gradient(180deg,#fff,#fbfcfb);box-shadow:var(--shadow-xs)}.calendarDay.selected{border-color:var(--primary);background:#eef8f5}.calendarDueItem,.dayOrder,.dayNote{background:#fff;box-shadow:var(--shadow-xs)}.userPicker{background:#f3f7f5;border-color:#bdcbc4}.userPick{box-shadow:var(--shadow-xs)}.userPick:has(input:checked){background:#e1f3ef;border-color:#4f9d91;box-shadow:0 4px 10px rgba(18,28,34,.08)}.bulkBar,.notifyPanel{box-shadow:0 16px 38px rgba(18,28,34,.16);border-color:rgba(18,28,34,.10)}.loginBox{border:1px solid rgba(255,255,255,.5);background:linear-gradient(180deg,#fff,#fbfcfb)}@media (max-width:900px){.side{padding:16px}.navBtn::before{width:24px;height:24px}.top{gap:12px}.card:hover,.taskCard:hover,.fileCard:hover{transform:none}} /* Chat redesign v3: calmer product messenger layout */ #chatScreen{height:calc(100vh - 104px);min-height:620px;overflow:hidden} #chatScreen .chatShell{display:grid;grid-template-columns:150px minmax(340px,420px) minmax(560px,1fr);gap:14px;height:100%;min-height:0;align-items:stretch} #chatScreen .chatTabs{display:flex;flex-direction:column;gap:10px;min-height:0;padding:10px;border:1px solid rgba(18,28,34,.10);border-radius:14px;background:linear-gradient(180deg,#f9fbf8 0%,#eef4f0 100%);box-shadow:0 10px 26px rgba(18,28,34,.06);color:var(--ink)} #chatScreen .chatTab{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:62px;padding:10px 10px 10px 14px;border:1px solid transparent;border-radius:12px;background:transparent;color:#56656c;font-weight:700;text-align:left;white-space:normal;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease} #chatScreen .chatTab span{display:grid;gap:3px;line-height:1.15;overflow-wrap:normal;word-break:normal} #chatScreen .chatTab span:before{content:"";width:22px;height:22px;border-radius:8px;background:#e6f1ee;border:1px solid rgba(15,98,89,.18);display:block;margin-bottom:2px} #chatScreen .chatTab[data-chat-tab="comments"] span:before{background:linear-gradient(135deg,#e8f3ff,#d9f1e9)} #chatScreen .chatTab[data-chat-tab="chats"] span:before{background:linear-gradient(135deg,#eef1ff,#e6f6ec)} #chatScreen .chatTab:hover{background:#fff;border-color:#d6e3de;color:#162126;box-shadow:0 6px 16px rgba(18,28,34,.06)} #chatScreen .chatTab.active{background:#1f776d;border-color:#1f776d;color:#fff;box-shadow:0 10px 24px rgba(31,119,109,.18)} #chatScreen .chatTab.active span:before{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.34)} #chatScreen .chatTab b{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#eef6f3;color:#0f6259;font-size:12px;font-weight:800;box-shadow:none} #chatScreen .chatTab.active b{background:#fff;color:#0f6259} #chatScreen .chatListPanel,#chatScreen .chatDetail{height:100%;min-height:0;overflow:hidden;border-radius:14px;border:1px solid rgba(18,28,34,.10);background:#fff;box-shadow:0 12px 28px rgba(18,28,34,.06)} #chatScreen .chatListPanel{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:0;padding:0} #chatScreen .chatListHead{padding:16px 16px 12px;border-bottom:1px solid #e3ebe7;background:linear-gradient(180deg,#fff,#f8fbf9)} #chatScreen .chatListHead h3{margin:0 0 4px;font-size:18px;line-height:1.2;font-weight:800;color:#172126} #chatScreen .chatListHead p{margin:0;font-size:13px;line-height:1.35;color:#6c7b82} #chatScreen .chatCreateBox{padding:12px 14px;border-bottom:1px solid #e3ebe7;border-top:0;background:#fbfdfb} #chatScreen .chatCreateBox .secondary{height:38px;border-radius:10px;font-weight:800} #chatScreen .chatList{min-height:0;overflow:auto;padding:10px;display:grid;gap:8px;align-content:start} #chatScreen .chatItem,#chatScreen .chatRoom{position:relative;display:grid;gap:7px;width:100%;padding:12px 12px 11px;border:1px solid #dbe5e1;border-radius:12px;background:#fff;text-align:left;box-shadow:0 4px 12px rgba(18,28,34,.04);transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease} #chatScreen .chatItem:hover,#chatScreen .chatRoom:hover{border-color:#9fc5bc;background:#fbfefd;box-shadow:0 8px 18px rgba(18,28,34,.07)} #chatScreen .chatItem.active,#chatScreen .chatRoom.active{border-color:#1f776d;background:#f1faf7;box-shadow:inset 3px 0 0 #1f776d,0 8px 18px rgba(31,119,109,.08)} #chatScreen .chatItem strong,#chatScreen .chatRoom strong{font-size:14px;line-height:1.25;font-weight:800;color:#152126} #chatScreen .chatMeta{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#708087;font-size:12px;line-height:1.25} #chatScreen .chatText{font-size:13px;line-height:1.35;color:#344349;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal} #chatScreen .commentBadge{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:#b63737;color:#fff;font-size:12px;font-weight:800} #chatScreen .chatDetail{display:grid;min-width:0;padding:0;background:#f7faf7} #chatScreen .chatThreadPanel{display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;gap:0;height:100%;min-height:0;overflow:hidden;border:0;border-radius:0;background:#e9f2dc;background-image:linear-gradient(45deg,rgba(255,255,255,.26) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.22) 25%,transparent 25%);background-size:36px 36px;background-position:0 0,18px 18px;box-shadow:none} #chatScreen #orderCommentsPanel.chatThreadPanel{grid-template-rows:auto minmax(0,1fr) auto} #chatScreen .chatThreadPanel>.sectionTitle{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:15px 18px;border-bottom:1px solid #e2ebe6;background:#fff;box-shadow:0 1px 0 rgba(18,28,34,.03)} #chatScreen .chatThreadPanel>.sectionTitle h4{margin:0;font-size:17px;line-height:1.2;font-weight:800;color:#152126} #chatScreen .chatThreadPanel>.sectionTitle p{margin:4px 0 0;max-width:760px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#6d7c83} #chatScreen .chatMembers{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid #e2ebe6;background:#fff} #chatScreen .memberToggle{height:30px;padding:0 12px;border-radius:999px;border:1px solid #dce7e2;background:#eef6f3;color:#223136;font-weight:800} #chatScreen .memberChip{height:28px;display:inline-flex;align-items:center;gap:5px;padding:0 9px;border-radius:999px;background:#eef4f1;color:#223136;font-size:12px;font-weight:700} #chatScreen .chatMemberTools{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:10px 16px;border-bottom:1px solid #e2ebe6;background:#fff} #chatScreen .chatMessages{min-height:0;height:100%;overflow:auto;padding:18px 20px 20px;display:flex;flex-direction:column;gap:10px;background:transparent;scrollbar-gutter:stable} #chatScreen .chatMessage{display:flex;flex-direction:column;gap:4px;max-width:min(72%,720px);padding:0;border:0;background:transparent;box-shadow:none;text-align:left} #chatScreen .chatMessage.theirs{align-self:flex-start;align-items:flex-start} #chatScreen .chatMessage.own{align-self:flex-end;align-items:flex-end} #chatScreen .chatMessageMeta{display:flex;align-items:center;gap:7px;max-width:100%;padding:0 7px;color:#68777f;font-size:12px;line-height:1.2} #chatScreen .chatMessage.own .chatMessageMeta{justify-content:flex-end;flex-direction:row-reverse} #chatScreen .chatMessageMeta strong{color:#253239;font-size:12px;font-weight:800;white-space:nowrap} #chatScreen .chatMessageMeta time{white-space:nowrap;color:#77878f} #chatScreen .commentAudience{display:inline-flex;align-items:center;max-width:180px;height:20px;padding:0 8px;border-radius:999px;background:#eef3f0;color:#536269;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #chatScreen .chatBubble{display:block;max-width:100%;padding:10px 12px;border:1px solid rgba(18,28,34,.08);border-radius:18px;background:#fff;box-shadow:0 4px 12px rgba(18,28,34,.08)} #chatScreen .chatMessage.theirs .chatBubble{border-top-left-radius:6px} #chatScreen .chatMessage.own .chatBubble{border-top-right-radius:6px;background:#ddffd7;border-color:rgba(31,119,109,.12)} #chatScreen .chatMessage .chatText{white-space:pre-wrap;overflow:visible;text-overflow:clip;font-size:15px;line-height:1.38;color:#132026;word-break:break-word} #chatScreen .chatTime,#chatScreen .chatBubbleHead{display:none!important} #chatScreen .chatComposer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end;margin:0;padding:12px 16px;border-top:1px solid #dde8e3;background:#fff;z-index:3;box-shadow:0 -8px 20px rgba(18,28,34,.04)} #chatScreen .chatComposer .commentTargetRow{grid-column:1 / -1;display:grid;gap:5px;font-size:12px;font-weight:800;color:#65747c} #chatScreen .chatComposer textarea,#chatScreen #chatMessageText,#chatScreen #chatOrderCommentText{height:54px!important;min-height:54px!important;max-height:110px!important;resize:vertical!important;overflow:auto;border-radius:11px;padding:11px 12px;font-size:14px;line-height:1.35} #chatScreen .chatComposer .primary,#chatScreen #sendChatMessageBtn,#chatScreen #sendOrderCommentBtn{height:54px!important;min-height:54px!important;padding:0 22px;border-radius:11px;align-self:stretch;white-space:nowrap} #chatScreen .commentTargetRow+textarea{grid-column:1 / 2} #chatScreen #sendOrderCommentBtn{grid-column:2 / 3} #chatScreen .chatEmptyState{display:grid;place-content:center;text-align:center;gap:8px;height:100%;background:#e9f2dc;color:#617079} #chatScreen .chatEmptyState strong{font-size:20px;color:#1b292f} #chatScreen .chatEmptyState p{margin:0;max-width:340px;line-height:1.45} @media (max-width:1300px){#chatScreen .chatShell{grid-template-columns:132px minmax(300px,360px) minmax(430px,1fr)}#chatScreen .chatMessage{max-width:82%}} /* Chat polish v4: applied design-engineering skills + overflow guards */ #chatScreen *{box-sizing:border-box} #chatScreen{--chat-ease-out:cubic-bezier(.23,1,.32,1);--chat-ease-standard:cubic-bezier(.2,.8,.2,1)} #chatScreen .chatShell{grid-template-columns:176px minmax(360px,430px) minmax(520px,1fr)} #chatScreen .chatTabs{background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(135%)} #chatScreen .chatTab{min-width:0;overflow:hidden;transition:background-color 160ms var(--chat-ease-out),border-color 160ms var(--chat-ease-out),box-shadow 160ms var(--chat-ease-out),color 160ms var(--chat-ease-out),transform 120ms var(--chat-ease-out)} #chatScreen .chatTab:active,#chatScreen .chatCreateBox .secondary:active,#chatScreen .chatComposer .primary:active,#chatScreen .chatItem:active,#chatScreen .chatRoom:active{transform:scale(.985)} #chatScreen .chatTab span,#chatScreen .chatListHead h3,#chatScreen .chatListHead p,#chatScreen .chatItem strong,#chatScreen .chatRoom strong,#chatScreen .chatText,#chatScreen .chatEmpty,#chatScreen .chatEmptyState p,#chatScreen .sectionTitle h4,#chatScreen .sectionTitle p{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal;hyphens:auto} #chatScreen .chatTab span{display:block;white-space:normal;line-height:1.18} #chatScreen .chatTab span:before{display:block;float:none} #chatScreen .chatMeta{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center} #chatScreen .chatMeta span:not(.commentBadge){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #chatScreen .chatText{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis} #chatScreen .chatMessage{min-width:0} #chatScreen .chatMessageMeta{min-width:0;flex-wrap:wrap;row-gap:3px} #chatScreen .chatMessage.own .chatMessageMeta{justify-content:flex-end} #chatScreen .chatMessageMeta strong{min-width:0;max-width:260px;white-space:normal;overflow-wrap:anywhere;word-break:normal} #chatScreen .chatMessageMeta time{flex:0 0 auto} #chatScreen .commentAudience{min-width:0;max-width:min(240px,100%);overflow:hidden;text-overflow:ellipsis} #chatScreen .chatBubble{min-width:0;overflow:hidden} #chatScreen .chatMessage .chatText{display:block;white-space:pre-wrap;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;word-break:break-word} #chatScreen .chatComposer{grid-template-columns:minmax(0,1fr) minmax(132px,auto)} #chatScreen .chatComposer textarea{min-width:0;width:100%} #chatScreen .chatComposer .primary{min-width:0;max-width:190px} #chatScreen .chatMemberTools select,#chatScreen .commentTargetRow select{min-width:0;width:100%} #chatScreen .memberChip{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (hover:hover) and (pointer:fine){#chatScreen .chatItem:hover,#chatScreen .chatRoom:hover{transform:translateY(-1px)}#chatScreen .chatTab:hover{transform:translateY(-1px)}} @media (max-width:1300px){#chatScreen .chatShell{grid-template-columns:160px minmax(320px,380px) minmax(420px,1fr)}#chatScreen .chatTab{padding-left:11px;padding-right:9px}#chatScreen .chatMessageMeta strong{max-width:190px}} @media (max-width:1050px){#chatScreen{height:auto;min-height:0;overflow:visible}#chatScreen .chatShell{grid-template-columns:1fr;min-height:0;height:auto}#chatScreen .chatTabs{display:grid;grid-template-columns:1fr 1fr}.chatDetail,#chatScreen .chatListPanel{min-height:420px}#chatScreen .chatThreadPanel{min-height:560px}#chatScreen .chatComposer{grid-template-columns:1fr}#chatScreen .commentTargetRow+textarea,#chatScreen #sendOrderCommentBtn{grid-column:auto}#chatScreen .chatComposer .primary{max-width:none;width:100%}} @media (prefers-reduced-motion:reduce){#chatScreen .chatTab,#chatScreen .chatItem,#chatScreen .chatRoom,#chatScreen .chatComposer .primary,#chatScreen .chatCreateBox .secondary{transition:background-color 120ms ease,border-color 120ms ease,color 120ms ease,box-shadow 120ms ease;transform:none!important}} /* Calendar alignment: right panels start on the day-card line */ #calendarScreen .calendarDuePanel, #calendarScreen .calendarEditor{margin-top:28px} #calendarScreen .calendarDuePanel{max-height:calc(100vh - 208px)} @media (max-width:1050px){#calendarScreen .calendarDuePanel,#calendarScreen .calendarEditor{margin-top:0;max-height:none}} /* Company, stages and resizable chat polish */ #chatScreen .chatShell{--chat-nav-w:220px;--chat-list-w:430px;grid-template-columns:var(--chat-nav-w) 8px var(--chat-list-w) 8px minmax(520px,1fr)!important;gap:8px!important;align-items:stretch} #chatScreen .chatTabs{min-width:180px!important;padding:12px!important} #chatScreen .chatTab{min-height:58px!important;padding:10px 12px!important} #chatScreen .chatTab span{white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;hyphens:none!important} #chatScreen .chatResizeHandle{width:8px;min-width:8px;height:100%;border-radius:999px;cursor:col-resize;background:linear-gradient(180deg,transparent,#d7e3de 22%,#d7e3de 78%,transparent);position:relative;opacity:.72;transition:opacity .16s ease,background-color .16s ease} #chatScreen .chatResizeHandle:before{content:"";position:absolute;left:3px;top:45%;width:2px;height:42px;border-radius:999px;background:#8da59d} #chatScreen .chatResizeHandle:hover,.isResizingChat #chatScreen .chatResizeHandle{opacity:1;background:linear-gradient(180deg,transparent,#c5d8d2 18%,#c5d8d2 82%,transparent)} .isResizingChat{cursor:col-resize;user-select:none} .companyGrid{grid-template-columns:minmax(300px,.72fr) minmax(680px,1.55fr)!important;gap:18px!important;align-items:start} #companyScreen .panel,#stagesScreen .panel{border:1px solid rgba(18,28,34,.10);border-radius:16px;background:linear-gradient(180deg,#fff 0%,#fbfdfb 100%);box-shadow:0 12px 28px rgba(18,28,34,.06);padding:18px!important} #companyScreen .panel h3,#stagesScreen .panel h3{font-size:18px;line-height:1.2;margin:0 0 4px;color:#142027;font-weight:820} #companyScreen .panel .muted{margin:0 0 14px;line-height:1.4} .departmentList{gap:10px!important;margin:16px 0!important} .departmentRow{display:flex!important;align-items:center;gap:10px;min-height:46px;padding:10px 12px;border:1px solid #dce8e3;border-radius:12px;background:#f8fbf9;box-shadow:0 4px 12px rgba(18,28,34,.04)} .departmentRow:before{content:"";width:10px;height:30px;border-radius:999px;background:#1f776d;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)} .departmentRow strong{font-size:14px;line-height:1.25;overflow-wrap:anywhere} .userList{gap:10px!important;margin:16px 0!important} .userRow.serverUser{position:relative;grid-template-columns:minmax(170px,1.15fr) minmax(130px,.8fr) minmax(160px,1fr) minmax(160px,1fr) minmax(160px,1fr) auto auto!important;gap:8px!important;padding:10px;border:1px solid #dce8e3;border-radius:12px;background:#fff;box-shadow:0 4px 12px rgba(18,28,34,.04)} .userRow.serverUser:hover{border-color:#9fc5bc;background:#fbfefd} .userRow.serverUser input,.userRow.serverUser select{height:40px;min-height:40px;border-radius:10px;background:#fbfcfb} .userStatus{justify-self:start;height:28px;white-space:nowrap} #addUserBtn,#addDepartmentBtn,#stagesScreen .secondary{height:40px;border-radius:11px;font-weight:800} .threeCols{grid-template-columns:repeat(3,minmax(300px,1fr))!important;gap:18px!important;align-items:start} .stageEditor{gap:10px!important;margin:16px 0!important} .stageRow{position:relative;grid-template-columns:22px minmax(0,1fr) 52px 38px!important;gap:8px!important;align-items:center;padding:9px 10px;border:1px solid #dce8e3;border-radius:13px;background:#fff;box-shadow:0 4px 12px rgba(18,28,34,.04)} .stageRow:before{content:"::";color:#8aa099;font-weight:900;letter-spacing:-2px;cursor:grab;line-height:1;transform:rotate(90deg)} .stageRow:hover{border-color:#9fc5bc;background:#fbfefd} .stageRow.dragOver{border-color:#1f776d;background:#eef8f5} .stageRow .stageName{height:40px;min-height:40px;border-radius:10px;background:#fbfcfb;font-weight:760;min-width:0} .stageColor{width:52px!important;height:34px!important;min-height:34px!important;border-radius:999px!important;padding:3px!important;background:#fff!important} .stageRow .iconBtn{width:34px;height:34px;border-radius:10px;background:#f5e2e2;color:#963333} #stagesScreen .panel:nth-child(1){box-shadow:inset 0 4px 0 #4da3ff,0 12px 28px rgba(18,28,34,.06)} #stagesScreen .panel:nth-child(2){box-shadow:inset 0 4px 0 #28b36f,0 12px 28px rgba(18,28,34,.06)} #stagesScreen .panel:nth-child(3){box-shadow:inset 0 4px 0 #f2a13a,0 12px 28px rgba(18,28,34,.06)} @media (max-width:1300px){.companyGrid{grid-template-columns:1fr!important}.threeCols{grid-template-columns:1fr!important}#chatScreen .chatShell{grid-template-columns:var(--chat-nav-w) 8px minmax(330px,var(--chat-list-w)) 8px minmax(420px,1fr)!important}} @media (max-width:1050px){#chatScreen .chatShell{grid-template-columns:1fr!important}.chatResizeHandle{display:none!important}.companyGrid,.threeCols{grid-template-columns:1fr!important}.userRow.serverUser{grid-template-columns:1fr 1fr!important}.userStatus,.userRow.serverUser .iconBtn{justify-self:start}} /* Mobile adaptation pass */ @media (max-width:760px){ html,body{max-width:100%;overflow-x:hidden} .layout{display:block!important;min-height:100vh} .side{position:sticky!important;top:0;z-index:30;width:100%;display:grid;grid-template-columns:1fr;gap:10px;padding:12px!important;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)} .brand{display:flex;align-items:center;gap:10px}.brandText strong{font-size:16px}.brandText span{font-size:11px} .userBox{margin:0!important;padding:10px!important}.userBoxTitle{font-size:11px}.nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.navBtn{min-height:42px;padding:8px!important;border-radius:10px;font-size:12px;justify-content:center;text-align:center}.navBtn::before{display:none!important}.navBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .main{padding:14px!important}.top{display:grid!important;grid-template-columns:1fr;gap:12px;margin-bottom:12px}.top h1,#screenTitle{font-size:28px;line-height:1.05}.topActions{justify-content:flex-start!important;gap:8px}.topActions .primary,.topActions .secondary,#quickAddBtn{min-height:42px;padding:0 12px;font-size:14px}.bellBtn{width:42px;height:42px} .toolbar{grid-template-columns:1fr!important;gap:8px!important}.search,#searchInput,.toolbar select{width:100%;min-width:0;height:42px} .board,.taskBoard{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(280px,88vw)!important;gap:10px!important;overflow-x:auto;overflow-y:hidden;min-height:calc(100vh - 245px);padding-bottom:10px;scroll-snap-type:x proximity}.column,.taskColumn{height:calc(100vh - 265px)!important;min-height:520px;scroll-snap-align:start}.card{font-size:13px}.card h3,.taskCard h3{font-size:14px} .calendarTop{margin-bottom:10px}.calendarLayout{display:grid!important;grid-template-columns:1fr!important;gap:12px}.calendarGrid{overflow-x:auto;grid-template-columns:repeat(7,minmax(88px,1fr))!important;gap:6px}.calendarDay{min-height:72px!important;padding:8px!important}.calendarDuePanel,.calendarEditor{width:100%;margin-top:0!important}.calendarEditor textarea{min-height:110px} #chatScreen{height:auto!important;min-height:0!important;overflow:visible!important}.chatResizeHandle{display:none!important}#chatScreen .chatShell{display:grid!important;grid-template-columns:1fr!important;height:auto!important;gap:10px!important}#chatScreen .chatTabs{grid-template-columns:1fr 1fr!important;display:grid!important;padding:8px!important}#chatScreen .chatTab{min-height:52px!important;padding:9px!important;font-size:13px}#chatScreen .chatListPanel{min-height:310px!important;height:310px!important}#chatScreen .chatDetail{min-height:560px!important;height:auto!important}#chatScreen .chatThreadPanel{min-height:560px!important;height:560px!important}#chatScreen .chatMessage{max-width:90%!important}#chatScreen .chatComposer{grid-template-columns:1fr!important}#chatScreen .chatComposer .primary{width:100%;max-width:none!important} .companyGrid,.threeCols{grid-template-columns:1fr!important;gap:12px!important}.userRow.serverUser{grid-template-columns:1fr!important}.userRow.serverUser input,.userRow.serverUser select{width:100%}.departmentRow{min-height:42px}.stageRow{grid-template-columns:18px minmax(0,1fr) 46px 34px!important;padding:8px!important}.stageRow .stageName{height:38px!important} dialog{max-width:100vw!important}.orderForm,.taskDialogForm,.userCreateForm,.noteDialogForm{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;padding:16px!important}.orderForm header,.taskDialogForm header,.userCreateForm header,.noteDialogForm header{position:sticky;top:0;background:#fff;z-index:4;margin:-16px -16px 12px;padding:12px 16px;border-bottom:1px solid var(--line)}.formGrid,.twoCols{grid-template-columns:1fr!important}.descriptionBar{display:grid!important;grid-template-columns:1fr!important;gap:8px}.commentsPanel{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;border-radius:0!important}.commentOpenBtn{width:100%}.actions{flex-wrap:wrap;gap:8px}.actions button{min-height:42px} .fileGrid,.attachmentRow{grid-template-columns:1fr!important}.fileCard{max-width:100%}.modalActionBar{position:sticky;bottom:0;background:#fff;padding-top:10px} } @media (max-width:420px){.nav{grid-template-columns:repeat(2,minmax(0,1fr))}.top h1,#screenTitle{font-size:24px}.board,.taskBoard{grid-auto-columns:92vw!important}.calendarGrid{grid-template-columns:repeat(7,78px)!important}.calendarDay{min-height:68px!important}.metric strong{font-size:22px}} /* Stage color contrast */ .columnHead{color:var(--stage-text,#fff)!important} .columnHead h3{color:inherit!important} .columnHead .count{color:inherit!important;background:color-mix(in srgb,currentColor 18%,transparent)!important;border:1px solid color-mix(in srgb,currentColor 25%,transparent)} .taskColumnHead .count{color:inherit!important;background:color-mix(in srgb,currentColor 18%,transparent)!important;border:1px solid color-mix(in srgb,currentColor 25%,transparent)} /* Stage contrast tuning */ .columnHead h3{font-weight:700!important} .taskColumnHead span:first-child{font-weight:720!important} .columnHead,.taskColumnHead{text-shadow:none!important} .columnHead[style*="--stage-text:#ffffff"],.taskColumnHead[style*="color:#ffffff"]{text-shadow:0 1px 1px rgba(0,0,0,.18)!important} /* Stage color picker shape */ .stageColor{width:54px!important;height:36px!important;min-height:36px!important;padding:0!important;border-radius:10px!important;border:1px solid rgba(18,28,34,.16)!important;background:transparent!important;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 2px 7px rgba(18,28,34,.08);cursor:pointer} .stageColor::-webkit-color-swatch-wrapper{padding:0!important;border:0!important;border-radius:10px!important} .stageColor::-webkit-color-swatch{border:0!important;border-radius:9px!important} .stageColor::-moz-color-swatch{border:0!important;border-radius:9px!important} .stageColor:hover{border-color:#7ea99f!important;box-shadow:0 0 0 3px rgba(31,119,109,.10)} /* Compact combined Company + Stages page */ #companyScreen .adminCompact{display:grid;grid-template-columns:minmax(560px,1.25fr) minmax(260px,.55fr);grid-template-areas:"users departments" "stages stages";gap:12px;align-items:start} #companyScreen .adminPanel{min-width:0;padding:12px;border:1px solid rgba(18,28,34,.10);border-radius:12px;background:linear-gradient(180deg,#fff,#fbfdfb);box-shadow:0 7px 18px rgba(18,28,34,.045);overflow:hidden} #companyScreen .adminPanelUsers{grid-area:users}#companyScreen .adminPanelDepartments{grid-area:departments}#companyScreen .adminPanelStages{grid-area:stages} #companyScreen .adminPanelHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px} #companyScreen .adminPanelHead h3{font-size:16px;line-height:1.15;margin:0;font-weight:760;color:#142027} #companyScreen .adminPanelHead h4{font-size:14px;line-height:1.15;margin:0;font-weight:760;color:#142027} #companyScreen .adminPanelHead .muted{margin-top:2px;font-size:12px;line-height:1.3} #companyScreen .adminPanelHead .secondary,#companyScreen #addUserBtn,#companyScreen #addDepartmentBtn{min-height:32px;height:32px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:720;white-space:nowrap} #companyScreen .compactNote{margin:0 0 8px;padding:7px 9px;border-radius:8px;font-size:12px;line-height:1.35} #companyScreen .compactUserList{display:grid;gap:6px;margin:0!important;max-height:340px;overflow:auto;padding-right:2px} #companyScreen .userRow.serverUser{grid-template-columns:minmax(130px,1fr) minmax(110px,.78fr) minmax(132px,.9fr) minmax(132px,.9fr) minmax(128px,.9fr) auto auto!important;gap:6px!important;align-items:center;padding:7px!important;border-radius:9px!important;box-shadow:none!important} #companyScreen .userRow.serverUser input,#companyScreen .userRow.serverUser select{height:32px!important;min-height:32px!important;padding:0 8px!important;border-radius:7px!important;font-size:12px!important;min-width:0} #companyScreen .passwordInputWrap{position:relative;min-width:0} #companyScreen .passwordInputWrap .adminPasswordInput{padding-right:34px!important;-webkit-text-security:none!important;text-security:none!important} #companyScreen .passwordEyeBtn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;background:#eef4f1;color:#1f6b5f;font-size:13px;display:grid;place-items:center} #companyScreen .passwordEyeBtn:hover,#companyScreen .passwordEyeBtn.active{background:#dcece7;color:#174f47} #companyScreen .companyPasswordActions{display:flex;align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(18,28,34,.08)} #companyScreen .companyPasswordActions .primary{min-height:34px;height:34px;padding:0 12px;border-radius:8px;font-size:12px} #companyScreen .companyPasswordStatus{font-size:12px;color:#1f6b5f;font-weight:700} #companyScreen .companyPasswordStatus.error{color:#a33d3d} #companyScreen .userStatus{height:24px;min-height:24px;padding:0 8px;border-radius:999px;font-size:11px;display:inline-flex;align-items:center;white-space:nowrap} #companyScreen .userRow.serverUser .iconBtn{width:30px;height:30px;min-height:30px;border-radius:8px;font-size:13px} #companyScreen .compactDepartmentList{display:grid;gap:6px;margin:0!important;max-height:340px;overflow:auto;padding-right:2px} #companyScreen .departmentRow{min-height:34px!important;padding:7px 9px!important;border-radius:9px!important;box-shadow:none!important;gap:8px!important} #companyScreen .departmentRow:before{width:6px;height:22px} #companyScreen .departmentRow strong{font-size:12px!important;line-height:1.25;font-weight:720;min-width:0;overflow-wrap:anywhere} #companyScreen .compactStages{display:grid;grid-template-columns:repeat(3,minmax(240px,1fr));gap:10px;align-items:start} #companyScreen .stageCompactGroup{min-width:0;display:grid;gap:7px;padding:9px;border:1px solid #dfe8e4;border-radius:10px;background:#fff} #companyScreen .stageCompactHead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px} #companyScreen .stageCompactHead h4{font-size:13px;margin:0;font-weight:760;color:#1b292f} #companyScreen .stageCompactHead .secondary{width:30px;height:30px;min-height:30px;padding:0;border-radius:8px;font-size:17px;line-height:1} #companyScreen .stageEditor{display:grid;gap:6px;margin:0!important;max-height:300px;overflow:auto;padding-right:2px} #companyScreen .stageRow{grid-template-columns:16px minmax(0,1fr) 42px 30px!important;gap:6px!important;align-items:center;padding:6px!important;border-radius:9px!important;box-shadow:none!important;min-height:42px;overflow:hidden} #companyScreen .stageRow:before{font-size:12px;letter-spacing:-2px;color:#8aa099} #companyScreen .stageRow .stageName{height:30px!important;min-height:30px!important;padding:0 8px!important;border-radius:7px!important;font-size:12px!important;font-weight:620!important;min-width:0;overflow:hidden;text-overflow:ellipsis} #companyScreen .stageColor{width:42px!important;height:28px!important;min-height:28px!important;border-radius:8px!important;padding:2px!important;background:#fff!important} #companyScreen .stageColor::-webkit-color-swatch-wrapper{padding:0;border-radius:6px} #companyScreen .stageColor::-webkit-color-swatch{border:0;border-radius:6px} #companyScreen .stageRow .iconBtn{width:28px!important;height:28px!important;min-height:28px!important;border-radius:7px!important;font-size:12px!important} #companyScreen .stageRow.dragOver{outline:2px solid rgba(31,107,95,.28);outline-offset:1px} @media (max-width:1280px){#companyScreen .adminCompact{grid-template-columns:1fr;grid-template-areas:"users" "departments" "stages"}#companyScreen .compactStages{grid-template-columns:1fr}} @media (max-width:760px){#companyScreen .userRow.serverUser{grid-template-columns:1fr!important}#companyScreen .compactUserList,#companyScreen .compactDepartmentList,#companyScreen .stageEditor{max-height:none}#companyScreen .adminCompact{gap:10px}} /* Hide separate departments panel, departments remain available in user rows */ #companyScreen .adminCompact{grid-template-columns:minmax(560px,1.05fr) minmax(520px,.95fr);grid-template-areas:"users stages"!important;align-items:start} #companyScreen .adminPanelDepartments{display:none!important} #companyScreen .adminPanelStages{grid-area:stages!important} #companyScreen .compactStages{grid-template-columns:1fr!important;gap:8px} #companyScreen .stageEditor{max-height:190px} @media (max-width:1280px){#companyScreen .adminCompact{grid-template-columns:1fr!important;grid-template-areas:"users" "stages"!important}#companyScreen .stageEditor{max-height:260px}} /* Expanded stages list on Company page: no inner scrolling */ #companyScreen .adminPanelStages{overflow:visible!important} #companyScreen .stageCompactGroup{overflow:visible!important} #companyScreen .stageEditor{max-height:none!important;overflow:visible!important;padding-right:0!important} /* Bottom add-stage buttons */ #companyScreen .stageAddBottom{width:100%;height:34px;min-height:34px;margin-top:2px;border-radius:9px;font-size:20px;line-height:1;font-weight:760;color:#1f6b5f;background:#fff;border:1px dashed #b9cdc6;box-shadow:none} #companyScreen .stageAddBottom:hover{background:#eef8f5;border-color:#1f6b5f} #companyScreen .stageCompactGroup{align-content:start} /* Company inner sections */ #companyScreen .companyTabs{display:inline-flex;gap:6px;margin:0 0 12px;padding:5px;border:1px solid rgba(18,28,34,.10);border-radius:12px;background:rgba(255,255,255,.72);box-shadow:0 8px 18px rgba(18,28,34,.05)} #companyScreen .companyTab{min-height:34px;padding:0 14px;border-radius:9px;background:transparent;color:#536069;font-size:13px;font-weight:720} #companyScreen .companyTab:hover{background:#eef8f5;color:#174f47} #companyScreen .companyTab.active{background:#1f6b5f;color:#fff;box-shadow:0 6px 14px rgba(31,107,95,.18)} #companyScreen .adminPanelAccess{grid-area:rights} #companyScreen .adminCompact[data-company-tab="passwords"]{grid-template-columns:1fr!important;grid-template-areas:"users"!important} #companyScreen .adminCompact[data-company-tab="funnels"]{grid-template-columns:1fr!important;grid-template-areas:"stages"!important} #companyScreen .adminCompact[data-company-tab="rights"]{grid-template-columns:1fr!important;grid-template-areas:"rights"!important} /* Backup actions moved into top bar, admin only */ .backupTopActions{display:flex;align-items:center;gap:7px;min-width:0} .backupTopActions.hidden{display:none!important} .backupTopBtn{height:34px!important;min-height:34px!important;padding:0 10px!important;border-radius:8px!important;font-size:12px!important;font-weight:720!important;white-space:nowrap;box-shadow:none!important} .backupTopBtn.fileLike{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden} .backupTopBtn.fileLike input{position:absolute;inset:0;opacity:0;cursor:pointer} .backupTopActions .danger{background:#f2dddd;color:#a33d3d;border:1px solid #efd0d0} @media (max-width:980px){.backupTopActions{order:5;width:100%;flex-wrap:wrap}.backupTopBtn{flex:1 1 150px}} .chatTab span:before{content:"💬"!important;display:grid!important;place-items:center!important;font-size:15px;line-height:1;color:#0f6259}.chatTab[data-chat-tab="chats"] span:before{content:"👥"!important}.chatTab.active span:before{color:#fff}.card h4{font-weight:600!important}.taskCard .taskCheck input{appearance:none!important;-webkit-appearance:none!important;width:20px!important;height:20px!important;min-height:20px!important;padding:0!important;border:1px solid #b7c9c4!important;border-radius:999px!important;background:#fff!important;display:grid!important;place-items:center!important;box-shadow:0 2px 7px rgba(31,42,50,.08)!important;flex:0 0 20px!important}.taskCard .taskCheck input:checked{background:var(--primary)!important;border-color:var(--primary)!important}.taskCard .taskCheck input:checked:after{content:"✓";color:#fff;font-size:13px;font-weight:800;line-height:1}.taskCardComments summary{list-style:none!important;display:flex!important;align-items:center!important;gap:7px!important;color:#536069!important}.taskCardComments summary::-webkit-details-marker{display:none!important}.taskCardComments summary:before{content:"›";display:grid;place-items:center;width:20px;height:20px;border-radius:999px;background:#eef6f3;color:var(--primaryDark);font-size:16px;font-weight:800;line-height:1;transition:transform .12s ease}.taskCardComments[open] summary:before{transform:rotate(90deg)}.taskCardMeta .chipPerson,.taskCardMeta .chipDate{display:inline-flex!important;align-items:center!important;min-height:21px!important;padding:2px 7px!important;border-radius:999px!important;font-size:11px!important;font-weight:700!important;line-height:1!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.taskCardMeta .chipPerson{background:#e9edf7!important;color:#284a7a!important}.taskCardMeta .chipDate{background:#fff0d9!important;color:#8a4d08!important}.calendarDay{position:relative;overflow:visible}.calendarEvents{display:grid;gap:3px;margin-top:8px}.calendarEvent{position:relative;display:block;width:max-content;max-width:100%;padding:2px 7px;border-radius:999px;font-size:10px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.calendarEvent.note{background:#fff0d9;color:#8a4d08}.calendarEvent.note.info{background:#e9edf7;color:#284a7a}.calendarEvent.note.important{background:#f2dddd;color:#8f2929}.calendarEvent.order{background:#e4f1ef;color:#12574e}.calendarEvent.task{background:#eee9fb;color:#58429a}.calendarEvent.more{background:#eef1ed;color:#68737a}.calendarDay.weekend{background:#fff8f7;border-color:#ead4d0}.calendarDay.holiday{background:#fff1f1;border-color:#e4b9b9}.calendarDay.holiday .calendarDate,.calendarDay.weekend .calendarDate{color:#9f3434}.calendarDay.selected.holiday,.calendarDay.selected.weekend{background:#fbe8e6}.calendarEvent.holiday{background:#f5dede;color:#8f2929}.calendarEvent[data-tip]:hover{overflow:visible;z-index:40}.calendarEvent[data-tip]:hover:after{content:attr(data-tip);position:absolute;left:0;top:calc(100% + 7px);width:235px;padding:9px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);box-shadow:0 14px 34px rgba(31,42,50,.18);font-size:12px;font-weight:500;line-height:1.35;white-space:pre-line;pointer-events:none}.calendarEvent[data-tip]:hover:before{content:"";position:absolute;left:14px;top:calc(100% + 2px);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;z-index:41}.calendarNoteBadge,.calendarOrderBadge,.calendarTaskBadge{display:none!important}#newCalendarNoteBtn{display:none!important}.calendarEditor #selectedDateTitle{font-size:18px} /* Calendar tooltip layering */ .calendarGrid{position:relative;overflow:visible} .calendarDay{isolation:isolate} .calendarDay:hover,.calendarDay:focus-within{z-index:80} .calendarEvent[data-tip]:hover,.calendarEvent[data-tip]:focus{z-index:90} .calendarEvent[data-tip]:hover:after,.calendarEvent[data-tip]:focus:after{z-index:100} .calendarEvent[data-tip]:hover:before,.calendarEvent[data-tip]:focus:before{z-index:101} /* Search filters */ .searchFilters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 16px}.filterSelect{width:auto;min-width:170px;max-width:240px;min-height:38px;padding:0 34px 0 12px;border:1px solid #c7d3cd;border-radius:10px;background:#fff;color:var(--ink);font-size:14px;box-shadow:0 3px 10px rgba(18,28,34,.04)}.filterSelect:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,107,95,.10)}.filterClear{min-height:38px;padding:0 13px;border-radius:10px;font-size:14px}.searchFilters.isFiltered .filterClear{border-color:#96b9b1;color:var(--primaryDark);background:#f1f8f6}@media (max-width:900px){.searchFilters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 12px}.filterSelect,.filterClear{width:100%;max-width:none;min-width:0}.filterClear{grid-column:1/-1}} /* Unified overlays and dialogs */ dialog{padding:0!important;border:0!important;border-radius:16px!important;background:transparent!important;overflow:hidden!important;box-shadow:0 24px 64px rgba(18,28,34,.24)!important} dialog>form,dialog>.confirmBox,dialog>.dialogPanel,.orderForm,.taskDialogForm,.userCreateForm,.noteDialogForm{border-radius:16px!important;background:#fff} dialog::backdrop{background:rgba(18,28,34,.48);backdrop-filter:blur(2px)} .commentsPanel,.notifyPanel,.loginBox{border-radius:16px!important} /* One clear selection control instead of a framed checkbox inside a frame */ .selectBox{width:22px!important;height:22px!important;display:grid!important;place-items:center!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important} .selectBox:hover{border:0!important;background:transparent!important} .selectBox input{appearance:none!important;-webkit-appearance:none!important;width:20px!important;height:20px!important;min-height:20px!important;margin:0!important;padding:0!important;border:1px solid #9fb1aa!important;border-radius:6px!important;background:#fff!important;box-shadow:0 2px 7px rgba(31,42,50,.10)!important;display:grid!important;place-items:center!important;cursor:pointer} .selectBox input:hover{border-color:#438d81!important;background:#f5fbf9!important} .selectBox input:checked{border-color:var(--primary)!important;background:var(--primary)!important} .selectBox input:checked:after{content:"✓";color:#fff;font-size:14px;font-weight:800;line-height:1} /* Calendar can be moved by dragging or by a gentle wheel scroll */ .calendarGrid{cursor:grab;touch-action:none;overscroll-behavior:contain} .calendarGrid.calendarDragging{cursor:grabbing;user-select:none} .calendarDay.calendarExtraRow{opacity:.28} .calendarDay.calendarExtraRow:hover,.calendarDay.calendarExtraRow:focus-within,.calendarDay.calendarExtraRow.selected{opacity:.72} @media (max-width:900px){dialog{border-radius:0!important}.calendarGrid{cursor:grab;touch-action:none}} /* Continuous calendar strip */ .calendarGrid.calendarScrollViewport{ display:block; height:min(620px,calc(100vh - 190px)); min-height:430px; overflow-y:auto; overflow-x:hidden; padding:0 6px 20px 0; cursor:grab; touch-action:none; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#aebcb5 transparent; } .calendarGrid.calendarScrollViewport.calendarDragging{cursor:grabbing;user-select:none} .calendarMonthSection{display:grid;gap:8px;padding:0 0 22px;scroll-margin-top:0} .calendarMonthSection+.calendarMonthSection{padding-top:12px;border-top:1px solid var(--line)} .calendarMonthLabel{margin:0;padding:2px 6px;color:var(--ink);font-size:14px;font-weight:650;text-transform:capitalize} .calendarMonthGrid{display:grid;grid-template-columns:repeat(7,minmax(74px,1fr));gap:7px} .calendarMonthGrid .calendarDayName{padding:0 6px} .calendarMonthGrid .calendarDay{min-height:78px} @media (max-width:1450px) and (min-width:901px){ .calendarLayout{grid-template-columns:minmax(540px,1fr) 310px} .calendarEditor{grid-column:1/-1} } @media (max-width:900px){ .calendarGrid.calendarScrollViewport{display:block!important;height:500px;min-height:420px;overflow:auto;padding-right:4px} .calendarMonthSection{min-width:650px} .calendarMonthGrid{grid-template-columns:repeat(7,minmax(88px,1fr));gap:6px} .calendarMonthGrid .calendarDay{min-height:72px!important;padding:8px!important} } /* One continuous sequence of unique calendar dates */ .calendarWeekdayHeader{ position:sticky; top:0; z-index:40; display:grid; grid-template-columns:repeat(7,minmax(74px,1fr)); gap:7px; padding:8px 0 9px; border-bottom:1px solid var(--line); background:rgba(239,245,241,.96); backdrop-filter:blur(8px); } .calendarWeeksGrid{display:grid;grid-template-columns:repeat(7,minmax(74px,1fr));gap:7px;padding-top:8px} .calendarWeeksGrid .calendarDay{ min-height:78px; opacity:.32; transition:opacity .22s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease; } .calendarWeeksGrid .calendarDay.activeMonth{opacity:1} .calendarWeeksGrid .calendarDay.selected:not(.activeMonth), .calendarWeeksGrid .calendarDay.today:not(.activeMonth){opacity:.75} .calendarWeeksGrid .calendarDay.monthStart{border-top-color:#d18a2c} .calendarMonthMarker{ position:absolute; top:6px; right:7px; color:#a86818; font-size:10px; font-weight:700; line-height:1; text-transform:uppercase; } @media (max-width:900px){ .calendarWeekdayHeader,.calendarWeeksGrid{grid-template-columns:repeat(7,minmax(88px,1fr));min-width:650px;gap:6px} .calendarWeeksGrid .calendarDay{min-height:72px!important;padding:8px!important} } /* Inclusive range from today to the selected calendar date */ .calendarRangeCount{ display:inline-flex; align-items:center; min-height:30px; padding:0 10px; border:1px solid rgba(31,107,95,.14); border-radius:999px; background:rgba(31,107,95,.08); color:#2d665d; font-size:12px; font-weight:600; white-space:nowrap; } .calendarRangeCount.past{ border-color:rgba(163,61,61,.15); background:rgba(163,61,61,.08); color:#914040; } .calendarRangeWorkDays{ display:inline-flex; align-items:center; margin-left:6px; padding:2px 7px; border-radius:999px; background:rgba(64,128,214,.14); color:#2466b6; font-weight:700; } .calendarWeeksGrid .calendarDay.calendarRange{ background:rgba(31,107,95,.055)!important; box-shadow:inset 0 0 0 1px rgba(31,107,95,.07); } .calendarWeeksGrid .calendarDay.calendarRangePast{ background:rgba(163,61,61,.055)!important; box-shadow:inset 0 0 0 1px rgba(163,61,61,.07); } .calendarWeeksGrid .calendarDay.calendarRange:not(.activeMonth){ opacity:.56; } .calendarWeeksGrid .calendarDay.calendarRange.selected{ box-shadow:inset 0 0 0 1px rgba(31,107,95,.14),0 0 0 1px var(--primary); } .calendarWeeksGrid .calendarDay.calendarRangePast.selected{ box-shadow:inset 0 0 0 1px rgba(163,61,61,.14),0 0 0 1px var(--danger); } /* Calculation requests */ .navBtn[data-screen="calculations"]::before{content:"∑"} .calculationToolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:14px} .calculationToolbar h3{margin:0 0 3px;font-size:18px} .calculationToolbar p{margin:0} .calculationToolbarActions{display:flex;align-items:center;gap:8px} .calculationToolbarActions input{width:min(330px,32vw);height:40px} .calculationBoard{display:grid;grid-template-columns:repeat(5,minmax(250px,1fr));gap:12px;align-items:stretch;overflow-x:auto;padding:1px 2px 10px;height:calc(100vh - 170px);min-height:420px} .calculationColumn{display:flex;flex-direction:column;min-width:250px;height:100%;min-height:0;border:1px solid #d8e0dc;background:rgba(242,246,243,.86);border-radius:8px;overflow:hidden} .calculationColumnHead{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;background:var(--calc-color);color:var(--calc-text);font-size:14px;font-weight:650} .calculationColumnHead .count{background:rgba(255,255,255,.25);color:inherit} .calculationCards{display:flex;flex:1;flex-direction:column;gap:8px;overflow-y:auto;padding:9px;min-height:0} .calculationColumn.dragOver{border-color:var(--primary);box-shadow:inset 0 0 0 2px rgba(31,107,95,.18);background:#e8f3ef} .calculationCard{position:relative;padding:12px;background:#fff;border:1px solid #dbe2df;border-left:3px solid var(--calc-color);border-radius:7px;box-shadow:0 5px 14px rgba(22,45,38,.06);cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease} .calculationCard:hover{border-color:#9dbbb2;box-shadow:0 8px 18px rgba(22,45,38,.1);transform:translateY(-1px)} .calculationCard.missingCalculationPrice{animation:missingCalculationPriceBlink 2.2s ease-in-out infinite} @keyframes missingCalculationPriceBlink{0%,62%,100%{border-color:#dbe2df;border-left-color:var(--calc-color);box-shadow:0 3px 10px rgba(22,45,38,.055);background:#fff}76%{border-color:#d66d6d;border-left-color:#b33232;box-shadow:0 0 0 3px rgba(179,50,50,.12),0 6px 16px rgba(132,34,34,.13);background:#fff8f8}} @media(prefers-reduced-motion:reduce){.calculationCard.missingCalculationPrice{animation:none;border-color:#d66d6d;border-left-color:#b33232;background:#fff8f8}} .calculationCard h4{margin:0 0 7px;font-size:14px;font-weight:650;line-height:1.25;overflow-wrap:anywhere} .calculationCard p{margin:3px 0;color:#5f6e74;font-size:12px;line-height:1.35;overflow-wrap:anywhere} .calculationCardMeta{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px} .calculationCardMeta span{display:inline-flex;align-items:center;min-height:23px;padding:3px 8px;border-radius:999px;background:#eef3f1;color:#36544b;font-size:11px} .calculationCardMeta .calcDeadlineSoon{background:#f9dddd;color:#9b2d2d} .calculationCardMeta .calcAnswered{background:#dcf1e9;color:#17654f} .calculationCardFooter{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid #edf1ef;color:#607077;font-size:11px} .calculationEmpty{padding:12px 8px;color:#7a888c;font-size:12px} #calculationDialog{width:min(900px,calc(100vw - 28px));max-height:calc(100vh - 28px);border-radius:10px} .calculationForm{display:flex;flex-direction:column;gap:16px;padding:20px;max-height:calc(100vh - 32px);overflow-y:auto} .calculationForm>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .calculationForm>header h3{margin:0 0 3px} .calculationFormGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px} .calculationWide{grid-column:1/-1} .calculationForm textarea{resize:vertical;min-height:76px} .calculationFiles,.calculationDecision{padding:14px;border:1px solid #d8e1dd;border-radius:8px;background:#fbfcfb} .calculationFiles .sectionTitle,.calculationDecision .sectionTitle{margin-bottom:10px} .calculationFiles .sectionTitle h4,.calculationDecision .sectionTitle h4{margin:0} .calculationFiles .sectionTitle p,.calculationDecision .sectionTitle p{margin:2px 0 0} .calculationFilesList{display:flex;flex-wrap:wrap;gap:8px} .calculationFile{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;width:min(100%,360px);padding:8px;border:1px solid #dce3e0;border-radius:7px;background:#fff} .calculationFileIcon{display:grid;place-items:center;width:34px;height:38px;border-radius:5px;background:#e7eefb;color:#315eaf;font-size:10px;font-weight:700} .calculationFileName{min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .calculationFileActions{display:flex;gap:4px} .calculationFileActions button{padding:6px 8px;font-size:11px} .calculationForm>footer{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-top:4px} .calculationFooterActions{display:flex;align-items:flex-end;gap:8px;margin-left:auto} .calculationFooterActions label{min-width:190px} .calculationDecision.isReadonly input,.calculationDecision.isReadonly textarea,.calculationDecision.isReadonly select{background:#f1f4f2;pointer-events:none} @media(max-width:760px){.calculationToolbar{align-items:stretch;flex-direction:column}.calculationToolbarActions{align-items:stretch;flex-direction:column}.calculationToolbarActions input{width:100%}.calculationBoard{grid-template-columns:repeat(5,minmax(82vw,1fr));height:calc(100vh - 230px);min-height:520px}.calculationColumn{height:100%;min-height:0}.calculationFormGrid{grid-template-columns:1fr}.calculationWide{grid-column:auto}.calculationForm>footer,.calculationFooterActions{align-items:stretch;flex-direction:column}.calculationFooterActions{width:100%}.calculationFooterActions label{min-width:0}} /* Calculation request form */ .calculationKnownPricesSection{border:1px solid var(--border);border-radius:10px;padding:16px;background:var(--surface,#fff)} .calculationKnownPrices{display:grid;gap:8px;margin-top:12px} .calculationPriceRow{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(150px,.7fr) 36px;gap:8px;align-items:center} .calculationPriceRow input{min-width:0} .calculationKnownPriceSummary{display:flex;justify-content:flex-end;align-items:baseline;gap:18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);color:var(--muted)} .calculationKnownPriceSummary strong{min-width:150px;text-align:right;color:var(--text);font-size:1.05rem} .dangerGhost{color:#a63434;background:#fff4f4;border-color:#efd0d0} .calculationDecision.isReadonly select:disabled,.calculationDecision.isReadonly input:disabled,.calculationDecision.isReadonly textarea:disabled{opacity:1;color:var(--text);background:#f5f7f6;cursor:default} @media(max-width:700px){.calculationPriceRow{grid-template-columns:minmax(0,1fr) 36px}.calculationPriceValue{grid-column:1}.calculationPriceRow .dangerGhost{grid-column:2;grid-row:1/3}.calculationKnownPriceSummary{justify-content:space-between}.calculationKnownPriceSummary strong{min-width:0}} /* Calculation selection and money fields */ .calculationBulkBar{margin:0 0 12px} .calculationCard{position:relative;padding-right:42px} .calculationCard.selected{outline:2px solid var(--calc-color);outline-offset:-2px;background:#f5fbfa} .calculationSelect{position:absolute;top:10px;right:10px;z-index:2} .calculationSelect input{width:18px;height:18px;margin:0;accent-color:#19766c} .calcMinPrice{background:#fff4dc;color:#76511a} .moneyInput{font-variant-numeric:tabular-nums} /* Select all controls without board rerender */ .selectAllControl{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font-weight:600;white-space:nowrap;cursor:pointer} .selectAllControl input,.stageSelectControl input{width:17px;height:17px;margin:0;accent-color:#19766c;cursor:pointer} .columnHeadActions{display:flex;align-items:center;gap:8px;flex:0 0 auto} .stageSelectControl{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.55);border-radius:7px;background:rgba(255,255,255,.2);cursor:pointer} .column .stageSelectControl{border-color:rgba(0,0,0,.12);background:rgba(255,255,255,.72)} .stageSelectControl:has(input:disabled){opacity:.45;cursor:default} .bulkBar{top:auto;bottom:22px} /* Compact calculation workspace */ .calculationBoard{grid-template-columns:repeat(4,minmax(235px,285px));justify-content:start;align-items:start;gap:10px;min-height:calc(100vh - 170px)} .calculationColumn{min-width:235px;border-color:#d9e2de;background:rgba(244,247,245,.9);box-shadow:0 5px 15px rgba(30,54,46,.035)} .calculationColumnHead{min-height:42px;padding:8px 10px;font-size:13px;font-weight:600} .calculationColumnHead .count{min-width:22px;height:22px;padding:0 6px;font-size:11px} .calculationCards{gap:7px;padding:7px} .calculationCard{padding:10px;border-left-width:3px;border-radius:7px;box-shadow:0 3px 10px rgba(22,45,38,.055);transform:none!important} .calculationCard:hover{border-color:#91b4aa;box-shadow:0 5px 14px rgba(22,45,38,.095)} .calculationCard.selected{outline:0;border-color:var(--calc-color);box-shadow:0 0 0 2px color-mix(in srgb,var(--calc-color) 22%,transparent),0 5px 14px rgba(22,45,38,.08);background:#f8fcfa} .calcCardHead{display:grid;grid-template-columns:minmax(0,1fr) 20px;align-items:start;gap:8px} .calcCardEyebrow,.calcCardLabel,.calcFact span,.calcCardResult span{display:block;margin-bottom:2px;color:#7a8884;font-size:10px;font-weight:500;line-height:1.2} .calculationCard h4{margin:0;font-size:13px;font-weight:620;line-height:1.25} .calculationSelect{position:static;align-self:start} .calcCardRequest{margin-top:8px;padding-top:7px;border-top:1px solid #edf1ef} .calcCardRequest p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:0;color:#354843;font-size:12px;line-height:1.32} .calcCardFacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px} .calcFact{min-width:0;padding:6px 7px;border-radius:6px;background:#f0f5f3} .calcFact strong{display:block;color:#29443d;font-size:11px;font-weight:600;line-height:1.25;overflow-wrap:anywhere} .calcFactUrgent{background:#fff0f0}.calcFactUrgent strong{color:#9a3434} .calcCardResult{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;margin-top:8px;padding:7px 8px;border-left:2px solid var(--calc-color);border-radius:0 6px 6px 0;background:color-mix(in srgb,var(--calc-color) 8%,#fff)} .calcCardResult div{min-width:0}.calcCardResult strong{display:block;color:#263d37;font-size:11px;font-weight:620;line-height:1.25;overflow-wrap:anywhere} .calculationCardFooter{margin-top:8px;padding-top:7px;font-size:10px}.calculationCardFooter time{white-space:nowrap} /* One clean checkbox instead of a square inside another square */ .stageSelectControl{display:grid;width:22px;height:22px;padding:0;border:0;border-radius:0;background:transparent!important;box-shadow:none;place-items:center} .column .stageSelectControl{border:0;background:transparent!important} .stageSelectControl input,.selectAllControl input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:18px;height:18px;min-height:18px;margin:0;padding:0;border:1px solid currentColor;border-radius:5px;background:rgba(255,255,255,.9);box-shadow:none;cursor:pointer} .stageSelectControl input:checked,.stageSelectControl input:indeterminate,.selectAllControl input:checked,.selectAllControl input:indeterminate{border-color:#176f64;background-color:#176f64;background-repeat:no-repeat;background-position:center;background-size:13px 13px} .stageSelectControl input:checked,.selectAllControl input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.2 8.2 6.5 11.4 12.9 4.6'/%3E%3C/svg%3E")} .stageSelectControl input:indeterminate,.selectAllControl input:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' d='M4 8h8'/%3E%3C/svg%3E")} .stageSelectControl input:checked:after,.selectAllControl input:checked:after{content:"✓";color:#fff;font-size:12px;font-weight:700;line-height:1} .stageSelectControl input:indeterminate:after,.selectAllControl input:indeterminate:after{content:"−";color:#fff;font-size:13px;font-weight:700;line-height:1} .calculationColumnHead .stageSelectControl input{border-color:color-mix(in srgb,currentColor 70%,transparent)} /* Compact and clearly divided request dialog */ #calculationDialog{width:min(830px,calc(100vw - 28px));border-radius:12px} .calculationForm{gap:11px;padding:16px} .calculationForm>header{padding-bottom:10px;border-bottom:1px solid var(--border)} .calculationForm>header h3{font-size:18px} .calculationRequestSection,.calculationKnownPricesSection,.calculationFiles,.calculationDecision{padding:12px;border:1px solid #dce4e0;border-radius:8px;background:#fbfcfb} .calculationRequestSection>.sectionTitle,.calculationKnownPricesSection>.sectionTitle,.calculationFiles>.sectionTitle,.calculationDecision>.sectionTitle{margin-bottom:9px;padding-bottom:8px;border-bottom:1px solid #e8eeeb} .calculationRequestSection .sectionTitle h4,.calculationKnownPricesSection .sectionTitle h4,.calculationFiles .sectionTitle h4,.calculationDecision .sectionTitle h4{margin:0;font-size:14px;font-weight:650} .calculationRequestSection .sectionTitle p,.calculationKnownPricesSection .sectionTitle p,.calculationFiles .sectionTitle p,.calculationDecision .sectionTitle p{margin:2px 0 0;font-size:11px} .calculationFormGrid{gap:9px 11px}.calculationForm label{font-size:12px}.calculationForm input,.calculationForm select{min-height:38px}.calculationForm textarea{min-height:62px} #calculationManagerComment{min-height:88px}.calculationKnownPrices{gap:6px;margin-top:8px}.calculationPriceRow{grid-template-columns:minmax(0,1.55fr) minmax(145px,.7fr) 34px;gap:6px} .calculationKnownPriceSummary{margin-top:9px;padding-top:9px}.calculationFilesList{gap:6px}.calculationForm>footer{position:sticky;bottom:-16px;z-index:3;margin:0 -16px -16px;padding:10px 16px 16px;border-top:1px solid var(--border);background:rgba(255,255,255,.96);backdrop-filter:blur(8px)} @media(max-width:760px){.calculationBoard{grid-template-columns:repeat(4,minmax(82vw,1fr))}.calcCardFacts,.calcCardResult{grid-template-columns:1fr}.calculationRequestSection,.calculationKnownPricesSection,.calculationFiles,.calculationDecision{padding:10px}} /* Calculation details and reply panel */ .calcFactWide{grid-column:1/-1} .calculationReplyLauncher{display:flex;justify-content:flex-end} .calculationReplyBtn{position:relative;min-height:36px;padding:0 12px;background:#e8f3ff;border-color:#b7d7f4;color:#245d8f} .calculationReplyBtn:hover{background:#dcecff;border-color:#8fc1ee} .calculationReplyBtn .commentBadge{margin-left:7px} .calculationInlineError{color:#963333;font-size:12px;font-weight:600} #calculationDialog.replyOpen{width:min(1180px,calc(100vw - 28px));display:grid;grid-template-columns:minmax(0,830px) minmax(310px,350px);overflow:hidden} #calculationDialog.replyOpen .calculationForm{border-right:1px solid var(--line)} .calculationReplyPanel{display:grid;grid-template-rows:auto auto minmax(110px,1fr) auto;min-width:0;max-height:calc(100vh - 32px);background:#f5f8f6;overflow:hidden} .calculationReplyPanel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:16px;border-bottom:1px solid var(--line);background:#fff} .calculationReplyPanel>header h4{margin:0 0 2px;font-size:16px} .calculationDecision{display:grid;gap:10px;margin:12px;padding:12px;border:1px solid #dce4e0;border-radius:8px;background:#fff} .calculationDecisionGrid{display:grid;grid-template-columns:minmax(120px,.8fr) minmax(150px,1fr);gap:8px 10px;align-items:stretch} .calculationResultField{grid-column:1;grid-row:1/span 2;align-self:center} .calculationPriceField{grid-column:2;grid-row:1} .calculationMinPriceField{grid-column:2;grid-row:2} .calculationDecisionGrid>.calculationWide{grid-column:1/-1} .calculationDecision label,.calculationReplyComposer{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:600} .calculationDecision input,.calculationDecision select{min-height:36px;padding:0 9px;font-size:12px} .calculationDecision textarea{min-height:64px;padding:8px 9px;font-size:12px;resize:vertical} .calculationReplySave{width:100%;min-height:36px} .calculationReplyMessages{display:flex;flex-direction:column;gap:8px;min-height:110px;padding:12px;overflow-y:auto;background:#eaf1e6} .calculationReplyEmpty{margin:auto;color:var(--muted);font-size:12px} .calculationReplyMessage{display:grid;gap:3px;max-width:88%} .calculationReplyMessage.own{align-self:flex-end} .calculationReplyMessage.theirs{align-self:flex-start} .calculationReplyMeta{display:flex;justify-content:space-between;gap:10px;padding:0 4px;color:var(--muted);font-size:10px} .calculationReplyMeta strong{color:#42534e;font-weight:600} .calculationReplyBubble{padding:8px 10px;border:1px solid rgba(31,42,50,.08);border-radius:14px 14px 14px 5px;background:#fff;color:var(--ink);font-size:12px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 2px 7px rgba(31,42,50,.06)} .calculationReplyMessage.own .calculationReplyBubble{border-radius:14px 14px 5px 14px;background:#e2f6ee} .calculationReplyComposer{gap:7px;padding:12px;border-top:1px solid var(--line);background:#fff} .calculationReplyComposer textarea{min-height:64px;max-height:110px;resize:none} .calculationReplyComposer button{min-height:36px} @media(max-width:980px){#calculationDialog.replyOpen{grid-template-columns:1fr;width:min(830px,calc(100vw - 20px));overflow:visible}.calculationReplyPanel{position:absolute;inset:0;z-index:8;max-height:calc(100vh - 20px);border-radius:10px}.calculationDecisionGrid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.calculationDecisionGrid{grid-template-columns:1fr}.calculationResultField,.calculationPriceField,.calculationMinPriceField{grid-column:1;grid-row:auto}.calculationReplyPanel{position:fixed;inset:0;max-height:100dvh;border-radius:0}} .boardScrollFrame{position:relative;min-width:0} .boardScrollFrame>.board,.boardScrollFrame>.taskBoard,.boardScrollFrame>.calculationBoard{width:100%;scroll-behavior:smooth} .boardScrollEdge{position:absolute;top:0;bottom:12px;width:58px;z-index:15;display:grid;place-items:center;border:0;background:transparent;color:var(--primaryDark);opacity:.25;transition:opacity .18s ease,transform .18s ease,background .18s ease;pointer-events:auto} .boardScrollEdge.left{left:0;background:linear-gradient(90deg,rgba(246,248,245,.92),rgba(246,248,245,0))} .boardScrollEdge.right{right:0;background:linear-gradient(270deg,rgba(246,248,245,.92),rgba(246,248,245,0))} .boardScrollEdge::before{display:grid;place-items:center;width:38px;height:74px;border:1px solid rgba(31,107,95,.20);border-radius:999px;background:rgba(255,255,255,.58);backdrop-filter:blur(6px);box-shadow:0 12px 28px rgba(31,42,50,.14);font-size:34px;font-weight:560;line-height:1} .boardScrollEdge.left::before{content:"‹";transform:translateX(-4px)} .boardScrollEdge.right::before{content:"›";transform:translateX(4px)} .boardScrollEdge:hover{opacity:.9;transform:scale(1.015)} .boardScrollEdge.hidden{opacity:0;pointer-events:none} .selectBox,.selectBox input,.stageSelectControl,.stageSelectControl input,.selectAllControl,.selectAllControl input,.taskCheck,.taskCheck input{cursor:pointer!important} .taskCheck:hover input[type="checkbox"],.selectBox:hover input[type="checkbox"],.stageSelectControl:hover input[type="checkbox"],.selectAllControl:hover input[type="checkbox"]{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(31,107,95,.10)!important} .taskCheck:hover span,.selectAllControl:hover span{color:var(--primaryDark)} /* Task cards: structured meta and consistent destructive actions */ .taskMetaGrid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px!important} .taskMetaItem{min-width:0;padding:7px 8px;border:1px solid #dce5e1;border-radius:9px;background:#f7faf8} .taskMetaItem span{display:block;margin-bottom:2px;color:#738087;font-size:10px;font-weight:650;line-height:1.1} .taskMetaItem b{display:block;color:#1d2a30;font-size:11px;font-weight:620;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .taskStatusChip{grid-column:1/-1;justify-self:start;flex-direction:row!important;align-items:center!important} .taskDeleteBtn,.taskDialogForm #deleteTaskDialogBtn{min-height:38px!important;padding:0 14px!important;border:1px solid #efd0d0!important;border-radius:10px!important;background:#f3dddd!important;color:#a33d3d!important;font-size:14px!important;font-weight:700!important;box-shadow:none!important} .taskDeleteBtn:hover,.taskDialogForm #deleteTaskDialogBtn:hover{background:#ecd0d0!important;border-color:#e0baba!important} .taskToolbar{display:flex;align-items:center;gap:10px;margin:0 0 10px} .taskBulkBar{top:auto;bottom:22px} .taskCard{position:relative;padding-right:42px} .taskCardSelect{position:absolute;right:10px;top:10px;z-index:3} .taskCardSelect .selectBox{width:22px;height:22px;padding:0;border-radius:6px} .taskCard.selected{outline:2px solid var(--primary);outline-offset:-2px;background:#f6fbf9} .taskCard .taskCardActions{padding-right:0} /* Custom date picker */ .datePickerPopover{position:fixed;z-index:220;width:296px;padding:12px;border:1px solid rgba(31,42,50,.12);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 22px 56px rgba(18,28,34,.24);backdrop-filter:blur(10px)} .datePickerPopover.hidden{display:none} .datePickerHead{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:8px;margin-bottom:10px} .datePickerHead strong{text-align:center;text-transform:capitalize;font-size:14px;font-weight:720;color:#162228} .datePickerHead button,.datePickerFoot button{border:1px solid #d8e2dd;border-radius:10px;background:#fff;color:#173c38;font-weight:800} .datePickerHead button{width:34px;height:34px;font-size:22px;line-height:1} .datePickerHead button:hover,.datePickerFoot button:hover{border-color:#91b8af;background:#eef8f5} .datePickerWeek,.datePickerDays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .datePickerWeek{margin-bottom:5px;color:#77848a;font-size:10px;font-weight:700;text-align:center} .datePickerDays button{height:34px;min-height:34px;padding:0;border:0;border-radius:10px;background:transparent;color:#17242a;font-size:13px;font-weight:620} .datePickerDays button:hover{background:#eef8f5;color:#0f6259} .datePickerDays button.muted{color:#a8b1b5;font-weight:520} .datePickerDays button.today{box-shadow:inset 0 0 0 1px #2b8b7d} .datePickerDays button.selected{background:#176f64;color:#fff;box-shadow:0 7px 16px rgba(23,111,100,.24)} .datePickerFoot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid #e5ece8} .datePickerFoot button{min-height:32px;padding:0 10px;font-size:12px} /* Final mobile dialog pass */ @media (max-width:900px){ input,select,textarea{font-size:16px!important} .main{padding:14px!important} .top{align-items:flex-start!important;gap:10px!important} .topActions{flex-wrap:wrap!important;justify-content:flex-start!important} .toolbar,.searchFilters{display:grid!important;grid-template-columns:1fr!important;gap:8px!important} .boardScrollEdge{display:none!important} dialog{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important;border-radius:14px!important;overflow:hidden!important} dialog[open]{display:block!important} dialog>form,.orderForm,.taskDialogForm,.userCreateForm,.noteDialogForm,.calculationForm{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 16px)!important;overflow:auto!important;border-radius:14px!important;padding:14px!important} .orderForm header,.taskDialogForm header,.userCreateForm header,.noteDialogForm header,.calculationForm header{position:sticky!important;top:0!important;z-index:5!important;margin:-14px -14px 12px!important;padding:12px 14px!important;border-bottom:1px solid var(--line)!important;background:#fff!important} .orderForm footer,.taskDialogForm footer,.userCreateForm footer,.noteDialogForm footer,.calculationForm footer{position:sticky!important;bottom:0!important;z-index:5!important;margin:12px -14px -14px!important;padding:12px 14px!important;border-top:1px solid var(--line)!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(8px)} .formGrid,.twoCols,.threeCols,.calculationFormGrid,.calculationDecisionGrid,.companyGrid{grid-template-columns:1fr!important} .descriptionBar,.actions,.calculationFooterActions{display:grid!important;grid-template-columns:1fr!important;gap:8px!important} .commentsPanel,.calculationReplyPanel{position:fixed!important;inset:10px!important;width:auto!important;height:auto!important;max-height:calc(100dvh - 20px)!important;border-radius:14px!important;z-index:90!important} .calendarLayout{grid-template-columns:1fr!important;gap:12px!important} .calendarGrid{grid-template-columns:repeat(7,minmax(72px,1fr))!important;gap:6px!important} .calendarDay{min-height:70px!important} #chatScreen .chatShell{grid-template-columns:1fr!important;height:auto!important;min-height:0!important} #chatScreen .chatListPanel{height:320px!important;min-height:320px!important} #chatScreen .chatThreadPanel{height:calc(100dvh - 190px)!important;min-height:520px!important} .attachmentTile{width:100%!important;max-width:100%!important} } @media (max-width:560px){ .layout{display:block!important} .side{position:relative!important;width:100%!important;min-height:0!important;padding:12px!important} .brand{margin-bottom:10px!important;padding-bottom:10px!important} .nav{grid-template-columns:repeat(2,minmax(0,1fr))!important} .navBtn{min-height:38px!important;font-size:13px!important} .top h2,#screenTitle{font-size:24px!important} dialog{inset:auto!important;width:100vw!important;max-width:100vw!important;max-height:100dvh!important;border-radius:0!important} dialog>form,.orderForm,.taskDialogForm,.userCreateForm,.noteDialogForm,.calculationForm{height:100dvh!important;max-height:100dvh!important;border-radius:0!important} .calendarGrid{grid-template-columns:repeat(7,minmax(58px,1fr))!important} .calendarDay{min-height:62px!important;padding:7px!important} .calendarEvent{max-width:100%!important;font-size:9px!important} } /* Safe task date and card layout fixes */ .taskDueField{display:grid;grid-template-columns:minmax(0,1fr) 40px;gap:8px;align-items:center} .taskDuePickerBtn{min-height:42px;border:1px solid var(--lineStrong);border-radius:10px;background:#fff;color:var(--primary);font-size:16px;font-weight:700;box-shadow:0 3px 10px rgba(31,42,50,.06)} .taskDuePickerBtn:hover{border-color:var(--primary);background:#eef8f5} .dateFieldHint{display:block;margin-top:6px;color:var(--muted);font-size:12px;font-weight:700} .taskMetaGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important} .taskMetaItem{min-width:0;padding:7px 9px!important;border-radius:9px!important} .taskMetaItem b{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-weight:650!important;line-height:1.25!important} .taskMetaItem:nth-child(3),.taskStatusChip{grid-column:1/-1} .taskCardComments{margin-right:-28px;padding-right:28px} .taskCard h3{font-weight:650} /* Task date picker layer and card space fix */ #taskDialog .datePickerPopover{z-index:999999} .taskDueField{grid-template-columns:minmax(0,1fr) 44px!important;gap:10px!important;align-items:center!important} .taskDuePickerBtn{height:42px;min-height:42px;width:44px;padding:0!important;display:grid;place-items:center;border-radius:10px!important} .taskCard{padding-right:10px!important} .taskCard>h3,.taskCardDesc{padding-right:34px} .taskMetaGrid{grid-template-columns:1fr!important} .taskMetaItem:nth-child(3),.taskStatusChip{grid-column:auto!important} .taskCardComments{margin-right:0!important;padding-right:0!important;border-top-width:1px!important} /* task dialog due date polish 20260722-27 */ #taskDialog .noteDialogForm{padding-bottom:18px!important} #taskDialog .noteDialogForm footer{margin-top:20px!important;padding-top:14px!important;border-top:1px solid var(--line);align-items:center!important} #taskDialog .formGrid{align-items:start!important} #taskDialog .formGrid>label{align-self:start!important} .taskDueLabel{position:relative!important;padding-bottom:22px!important} .taskDueLabel .dateFieldHint,.taskDueLabel .fieldErrorText{position:absolute!important;left:0;top:calc(100% - 17px);margin:0!important;font-size:12px!important;line-height:1.2!important;white-space:nowrap!important} .taskDueField{display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;gap:10px!important;align-items:center!important;margin-top:0!important} .taskDuePickerBtn{height:42px!important;min-height:42px!important;width:44px!important;padding:0!important;display:grid!important;place-items:center!important;border-radius:12px!important;border:1px solid var(--line)!important;background:#fff!important;box-shadow:0 6px 18px rgba(31,42,50,.08)!important} .taskDuePickerBtn:hover{border-color:var(--primary)!important;background:#eef8f5!important} .taskDueInlineCalendar{width:min(322px,100%);margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 18px 45px rgba(31,42,50,.18);position:relative;z-index:20} .taskDueInlineCalendar.hidden{display:none!important} .taskDueCalendarHead{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:8px;margin-bottom:10px} .taskDueCalendarHead strong{text-align:center;text-transform:capitalize;font-size:14px;font-weight:650;color:var(--ink)} .taskDueCalendarHead button,.taskDueCalendarFoot button{min-height:34px;border-radius:12px;border:1px solid var(--line);background:#f8faf8;color:var(--ink);font-weight:650} .taskDueCalendarHead button:hover,.taskDueCalendarFoot button:hover{border-color:var(--primary);background:#eef8f5} .taskDueCalendarWeek,.taskDueCalendarDays{display:grid;grid-template-columns:repeat(7,1fr);gap:5px} .taskDueCalendarWeek span{text-align:center;font-size:11px;color:var(--muted);font-weight:650} .taskDueDay{min-height:34px;border-radius:12px;background:transparent;color:var(--ink);font-weight:560;border:1px solid transparent} .taskDueDay.muted{color:#a5afb3;background:#f7f9f7} .taskDueDay.today{border-color:rgba(31,107,95,.55)} .taskDueDay.selected{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important} .taskDueDay:hover{background:#e8f4f0;border-color:#c9ded8} .taskDueCalendarFoot{display:flex;justify-content:space-between;gap:8px;margin-top:10px} .userPick{pointer-events:none!important} .userPick input,.userPick span{pointer-events:auto!important;cursor:pointer!important} .userPick:hover{border-color:#a7c9bf!important;box-shadow:0 8px 20px rgba(31,42,50,.07)!important} .fieldLabel{display:grid;gap:8px;color:var(--muted);font-size:13px;font-weight:700} .taskAssigneesField{margin-top:2px} /* task dialog compact overlay calendar 20260722-28 */ #taskDialog .noteDialogForm{gap:10px!important;padding:18px 22px 14px!important} #taskDialog .noteDialogForm header{margin-bottom:2px!important;padding-bottom:10px!important;border-bottom:1px solid var(--line)} #taskDialog .noteDialogForm label{gap:6px!important} #taskDialog .noteDialogForm textarea#taskDescriptionInput{min-height:112px!important;max-height:150px!important} #taskDialog .formGrid{gap:10px 14px!important} #taskDialog .taskAssigneesField{gap:6px!important;margin-top:0!important} #taskDialog #taskAssigneesPicker.userPicker{max-height:none!important;overflow:visible!important;padding:8px!important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))!important} #taskDialog #taskAssigneesPicker .userPick{min-height:34px!important;padding:7px 10px!important} #taskDialog .taskDialogComments{gap:7px!important;margin-top:6px!important;padding-top:12px!important} #taskDialog .taskDialogComments h4{margin:0!important} #taskDialog .taskDialogComments .taskComments{max-height:105px!important;margin-top:0!important} #taskDialog .taskComment{padding:7px 9px!important} #taskDialog .taskCommentBox{gap:8px!important;margin-top:6px!important} #taskDialog #taskDialogCommentText{min-height:82px!important;max-height:110px!important;resize:vertical!important} #taskDialog #taskDialogCommentSend{min-height:36px!important} #taskDialog .noteDialogForm footer{margin-top:10px!important;padding-top:12px!important;padding-bottom:0!important} #taskDialog .noteDialogForm footer .danger,#taskDialog .noteDialogForm footer button{min-height:42px!important} .taskDueLabel{position:relative!important;padding-bottom:20px!important;overflow:visible!important} .taskDueInlineCalendar{position:absolute!important;right:0!important;top:68px!important;width:min(322px,100%)!important;margin-top:0!important;z-index:9999!important} .taskDueInlineCalendar:not(.hidden){animation:taskCalendarDrop .14s ease-out both} @keyframes taskCalendarDrop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} /* leader task/notification grouping 20260727-02 */ .taskCardGroup{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .taskCardGroupTitle{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,.7);border:1px solid rgba(31,107,95,.12);font-size:12px;font-weight:650;color:var(--muted)} .taskCardGroupTitle b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:#eef4f1;color:#1f6b5f;font-size:12px} .taskCardGroupOwn .taskCardGroupTitle{background:#edf8f5;color:#1f6b5f} .taskCardGroupIssued .taskCardGroupTitle{background:#fff6e8;color:#7a4d17} .notificationGroup{display:flex;flex-direction:column;gap:8px;margin-bottom:12px} .notificationGroupTitle{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;background:#f3f7f5;color:var(--muted);font-weight:650;font-size:13px} .notificationGroupTitle b{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:999px;background:#fff;color:#1f6b5f;font-size:12px} /* calendar task modal open and full user picker hit area 20260727-03 */ .calendarTaskMini{width:100%;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;cursor:pointer} .calendarTaskMini:hover{background:#f5fbf8} .calendarTaskMini:focus-visible{outline:2px solid var(--primary);outline-offset:-2px} .userPicker{align-items:stretch} .userPick{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;min-height:42px!important;cursor:pointer!important;user-select:none!important} .userPick input{flex:0 0 auto!important;pointer-events:none!important} .userPick span{display:block!important;min-width:0!important;overflow-wrap:anywhere!important} /* Orders view modes and cleaner card body */ .viewModeSelect{min-width:118px} .card{border-radius:10px;background:linear-gradient(180deg,#fff,#fbfcfb);box-shadow:0 7px 18px rgba(18,28,34,.07)} .card:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(18,28,34,.10)} .cardContent{display:grid;gap:8px;padding-right:30px} .card h4{font-weight:620;font-size:13.5px;line-height:1.28;letter-spacing:0;overflow-wrap:anywhere} .cardNumber{color:#68767c;font-size:11.5px;font-weight:620} .cardMeta{gap:6px;margin-top:0} .cardMeta .chip,.cardMeta .timerChip{font-weight:650} .cardFooter{margin-top:2px;margin-right:0;padding-top:7px;border-top:1px solid rgba(31,42,50,.08)} .cardFooter .chipPerson{margin-left:auto;max-width:118px} .cardDownloadBtn{min-height:27px;border-radius:8px} #orderDialog.commentsOpen{width:min(1180px,calc(100vw - 28px));display:grid;grid-template-columns:minmax(0,840px) minmax(310px,330px);overflow:hidden!important} #orderDialog.commentsOpen .orderForm{border-right:1px solid var(--line)} #orderDialog.commentsOpen .commentsPanel{position:static!important;width:auto!important;height:auto!important;min-height:0;border:0;border-radius:0!important;box-shadow:none!important;background:#fff;display:grid} #orderDialog .commentsPanel.hidden{display:none!important} .orderList{display:grid;gap:8px;align-content:start;overflow:auto;min-height:calc(100vh - 170px);padding:2px 2px 12px} .orderListRow{display:grid;grid-template-columns:28px minmax(260px,1.7fr) minmax(140px,.8fr) minmax(120px,.7fr) minmax(150px,.9fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 6px 16px rgba(18,28,34,.05);cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease} .orderListRow:hover{border-color:#99b8af;box-shadow:0 9px 22px rgba(18,28,34,.09);transform:translateY(-1px)} .orderListRow.selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(31,107,95,.12)} .orderListMain{min-width:0}.orderListMain h4{margin:0 0 5px;font-size:14px;font-weight:620;line-height:1.25;overflow-wrap:anywhere}.orderListSub{display:flex;flex-wrap:wrap;gap:6px 10px;color:#68767c;font-size:12px}.orderListCell{display:grid;gap:3px;min-width:0}.orderListCell strong{font-size:12.5px;font-weight:620;line-height:1.25;overflow-wrap:anywhere}.listLabel{color:#7c8a8f;font-size:10.5px;font-weight:700;text-transform:uppercase}.listDue{display:inline-flex;width:max-content;max-width:100%;padding:3px 8px;border-radius:999px;background:#e4f1ef;color:#12574e}.listDue.warning{background:#f5dfdf;color:#8d2f2f}.listDue.overdue{background:#963333;color:#fff}.orderListActions{display:flex;align-items:center;justify-content:flex-end;gap:7px}.orderListEmpty{padding:18px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);background:#fff} @media(max-width:980px){#orderDialog.commentsOpen{grid-template-columns:1fr;width:min(840px,calc(100vw - 20px));overflow:visible!important}#orderDialog.commentsOpen .commentsPanel{position:absolute!important;inset:0!important;z-index:7;border-radius:16px!important}.orderListRow{grid-template-columns:26px minmax(0,1fr);align-items:start}.orderListCell,.orderListActions{grid-column:2}.orderListActions{justify-content:flex-start}} /* 20260727-06: order view buttons, footer alignment, cleaner order dialog internals */ .toolbar{grid-template-columns:auto minmax(260px,1fr) 260px auto;align-items:center} .viewModeToggle{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--lineStrong);border-radius:12px;background:rgba(255,255,255,.82);box-shadow:var(--shadow-xs);width:max-content;white-space:nowrap} .viewModeBtn{min-height:34px;padding:0 12px;border-radius:9px;background:transparent;color:#53626a;font-size:13px;font-weight:650;letter-spacing:0;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease} .viewModeBtn:hover{background:#f3f8f6;color:#14242a} .viewModeBtn.active{background:var(--primary);color:#fff;box-shadow:0 5px 13px rgba(18,28,34,.12)} .viewModeSelect{display:none!important} .cardFooter{margin-right:-30px!important;padding-top:7px!important;border-top:1px solid rgba(31,42,50,.08);align-items:center!important} .cardFooter .chipPerson{margin-left:auto!important;margin-right:0!important;max-width:118px!important;justify-self:end!important} .cardFooter .cardActions{flex:0 1 auto}.cardFooter .chipPerson:empty{display:none} .orderForm{gap:13px!important;color:#162229} .orderForm>header{margin-bottom:2px}.orderForm>footer{margin-top:4px} .orderForm .clientInfoBlock,.orderForm>.formGrid,.orderForm>label:has(#workName),.orderForm .orderSection{border:1px solid #d9e3de;border-radius:13px;background:linear-gradient(180deg,#fff,#fbfdfc);box-shadow:0 4px 12px rgba(18,28,34,.035)} .orderForm>.formGrid{position:relative;padding:40px 14px 14px;gap:12px;background:#fbfdfc} .orderForm>.formGrid::before{content:"\041E\0441\043D\043E\0432\043D\044B\0435 \0434\0430\043D\043D\044B\0435";position:absolute;left:14px;top:13px;color:#152228;font-size:15px;font-weight:680;line-height:1} .orderForm .clientInfoBlock{padding:14px!important} .orderForm>label:has(#workName){position:relative;display:grid;gap:8px;padding:39px 14px 14px;color:transparent!important;font-size:0!important} .orderForm>label:has(#workName)::before{content:"\041D\0430\0438\043C\0435\043D\043E\0432\0430\043D\0438\0435 \0440\0430\0431\043E\0442";position:absolute;left:14px;top:13px;color:#152228;font-size:15px;font-weight:680;line-height:1} .orderForm label{font-size:12.5px!important;font-weight:610!important;color:#627179!important;letter-spacing:0!important} .orderForm label input,.orderForm label select,.orderForm label textarea,.orderForm .richInput{font-weight:500!important;color:#18252b!important;font-size:14px!important;line-height:1.42} .orderForm textarea#workName{min-height:74px;font-weight:520!important;line-height:1.42;background:#fff} .orderForm .sectionTitle h4,.orderForm .fieldTools h4{font-size:15px;font-weight:680;color:#152228;letter-spacing:0} .orderForm .sectionHint{font-weight:500;color:#718086;font-size:12px} .orderForm input,.orderForm select,.orderForm textarea,.orderForm .richInput{border-radius:10px!important;box-shadow:none!important;border-color:#cbd8d2!important} .orderForm input:focus,.orderForm select:focus,.orderForm textarea:focus,.orderForm .richInput:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(31,107,95,.10)!important} .descriptionBar{display:flex!important;align-items:center;gap:10px;margin:1px 0 0}.descriptionBar .commentOpenBtn{margin-left:auto;background:#eaf4ff;border-color:#bdd8f6;color:#245d8f} .technicalBlock{display:grid;gap:12px}.chassisGrid{gap:10px}.orderForm .historyBlock{margin-top:4px} @media(max-width:900px){.toolbar{grid-template-columns:1fr!important}.viewModeToggle{width:100%;justify-content:stretch}.viewModeBtn{flex:1}.cardFooter{margin-right:0!important}.descriptionBar{display:grid!important;grid-template-columns:1fr!important}.descriptionBar .commentOpenBtn{margin-left:0}} /* 20260727-07: order dates stacked and floating date picker */ .orderForm>.formGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important} .orderForm>.formGrid>label:has(#orderNumber){grid-column:1!important;grid-row:1!important} .orderForm>.formGrid>label:has(#manager){grid-column:2!important;grid-row:1!important} .orderForm>.formGrid>label:has(#contract){grid-column:1!important;grid-row:2 / span 2!important;align-self:start!important} .orderForm>.formGrid>label:has(#arrivalDate){grid-column:2!important;grid-row:2!important} .orderForm>.formGrid>label:has(#dueDate){grid-column:2!important;grid-row:3!important} .orderForm>.formGrid>label.hidden{display:none!important} .orderForm>.formGrid::before{content:"\041E\0441\043D\043E\0432\043D\044B\0435\0020\0434\0430\043D\043D\044B\0435"!important} .orderForm>label:has(#workName)::before{content:"\041D\0430\0438\043C\0435\043D\043E\0432\0430\043D\0438\0435\0020\0440\0430\0431\043E\0442"!important} .datePickerPopover{position:fixed!important;z-index:999999!important;max-height:min(386px,calc(100vh - 16px));overflow:auto!important} #orderDialog .datePickerPopover{position:fixed!important} @media(max-width:900px){.orderForm>.formGrid{grid-template-columns:1fr!important}.orderForm>.formGrid>label:has(#orderNumber),.orderForm>.formGrid>label:has(#manager),.orderForm>.formGrid>label:has(#contract),.orderForm>.formGrid>label:has(#arrivalDate),.orderForm>.formGrid>label:has(#dueDate){grid-column:auto!important;grid-row:auto!important}} /* 20260727-08: open design + frontend checklist polish */ :root{--focusRing:rgba(27,126,112,.28);--surfaceSoft:#f8fbf9;--surfaceWarm:#fffdf8;--shadowSoft:0 10px 28px rgba(22,36,42,.08);--shadowLift:0 14px 34px rgba(22,36,42,.12)} :where(button,input,select,textarea,[contenteditable="true"],.calendarDay,.card,.taskCard,.calculationCard,.selectBox,.userPick):focus-visible{outline:3px solid var(--focusRing)!important;outline-offset:2px!important} :where(button,.navBtn,.iconBtn,.selectBox,.userPick,[role="button"]){cursor:pointer} :where(.card,.taskCard,.calculationCard,.chatConversationItem,.messageBubble,.calendarDueItem,.calendarEventPill,.calculationListRow,.orderListRow){overflow-wrap:anywhere;word-break:normal;min-width:0} .card h4,.taskCard h3,.calculationCard h3,.chatConversationItem strong,.calendarDueItem strong{font-weight:650;line-height:1.22;overflow-wrap:anywhere}.card h4{font-weight:620}.card p,.taskCardDesc,.muted{font-weight:430}.card:hover,.taskCard:hover,.calculationCard:hover{transform:none!important;border-color:rgba(31,126,112,.55)!important;box-shadow:var(--shadowLift)!important;background:#fbfefd!important} .selectBox{border-radius:8px!important;background:linear-gradient(180deg,#fff,#f7faf8)!important}.selectBox input,.userPick input,input[type="checkbox"]{accent-color:var(--primary);cursor:pointer}.selectBox input{margin:0!important}.userPick{font-weight:560!important;align-items:center}.userPick span,.userPick strong{min-width:0;overflow-wrap:anywhere} dialog{border:0!important;border-radius:20px!important;box-shadow:0 28px 90px rgba(11,21,26,.32)!important}dialog::backdrop{background:rgba(14,23,28,.52)!important;backdrop-filter:blur(3px)}dialog>form,.commentsPanel,.calculationReplyPanel{border-radius:20px!important}.confirmBox,.noteDialogForm,.userCreateForm{border-radius:18px!important} .orderForm{gap:12px!important;color:#15221f}.orderForm header{border-bottom:1px solid rgba(31,42,50,.1);padding-bottom:12px}.orderForm label{font-weight:560!important;color:#5e6d74!important}.orderForm input,.orderForm select,.orderForm textarea,.richInput{font-weight:470!important;color:#18231f!important}.orderForm textarea,.richInput{line-height:1.55!important}.orderSection{background:linear-gradient(180deg,#fff,#fbfcfb)!important;border-color:rgba(31,42,50,.12)!important;border-radius:14px!important;box-shadow:0 4px 14px rgba(22,36,42,.035)!important;padding:13px 15px!important;margin-top:12px!important}.orderSection .sectionTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:0!important;margin-bottom:10px}.orderSection h4,.sectionTitle h4{font-size:15px!important;font-weight:650!important;letter-spacing:0!important}.sectionHint{font-size:12px!important;font-weight:430!important;color:#75838a!important;white-space:normal!important;text-align:right}.formGrid{gap:12px 14px!important}.formGrid label{display:grid;gap:6px!important}.fieldErrorText{display:block;margin-top:6px;color:#a52a2f!important;font-size:12px;font-weight:560}.fieldErrorText.hidden{display:none}.fieldError{border-color:#bd3f46!important;box-shadow:0 0 0 3px rgba(189,63,70,.12)!important} .descriptionBar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0}.descriptionBar .commentOpenBtn{background:#e8f3ff!important;border-color:#b9d9ff!important;color:#245f9e!important}.footerActions,.footerSaveRow{gap:8px!important}.orderForm footer{border-top:1px solid rgba(31,42,50,.1);padding-top:12px;margin-top:12px} .datePickerPopover{border-radius:18px!important;border-color:rgba(31,42,50,.12)!important;background:rgba(255,255,255,.98)!important;box-shadow:0 24px 70px rgba(13,28,34,.26)!important}.datePickerPopover button{border-radius:12px!important}.datePickerDays button{transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}.datePickerDays button:hover{background:#edf8f5!important;border-color:rgba(31,126,112,.45)!important}.datePickerDays button.selected{background:var(--primary)!important;color:#fff!important} .taskCardMeta,.taskChipRow,.cardMeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.taskCard .taskMetaTile{border-radius:10px!important;font-weight:520!important}.taskCard .taskCommentsToggle{border-top:1px solid rgba(31,42,50,.1)!important;padding-top:8px!important;margin-top:2px!important}.taskDialogComments{margin-top:12px!important;padding-top:12px!important;border-top:1px solid rgba(31,42,50,.1)!important} .chatShell,.chatDetail,.chatListPanel{border-radius:14px!important}.chatTabs{min-width:210px!important}.chatTab{gap:10px!important;white-space:normal!important}.messageBubble{border-radius:18px!important;max-width:min(560px,82%)!important}.messageMeta{font-size:11px;color:#6f7f86}.messageText{line-height:1.42}.chatComposer textarea{min-height:56px!important;max-height:116px!important}.chatComposer button{min-height:42px!important} .board,.taskBoard,.calculationsBoard{scroll-behavior:smooth}.boardScrollControl{backdrop-filter:blur(10px);border-radius:18px!important}.columnHeader,.taskColumnHeader,.calculationColumnHeader{letter-spacing:0!important;font-weight:650!important}.column,.taskColumn,.calculationColumn{border-radius:12px!important;box-shadow:0 8px 20px rgba(22,36,42,.045)!important} @media(max-width:900px){dialog{width:min(100vw - 16px,720px)!important;max-height:calc(100dvh - 16px)!important}.orderForm{padding:14px!important}.orderSection{padding:12px!important}.formGrid,.calculationFormGrid{grid-template-columns:1fr!important}.commentsPanel,.calculationReplyPanel{position:fixed!important;inset:auto 8px 8px 8px!important;width:auto!important;max-height:48dvh!important}.datePickerPopover{width:min(296px,calc(100vw - 16px))!important}.chatTabs{min-width:0!important}.messageBubble{max-width:92%!important}} /* 20260727-09: fuller visual quality pass */ body{background:radial-gradient(circle at 15% 0%,rgba(216,236,229,.72),transparent 34%),linear-gradient(180deg,#f6faf7 0%,#eef5f1 100%)!important;color:#14211d!important;text-rendering:optimizeLegibility} .appShell,.screenShell,.mainContent{min-width:0}.mainContent{background:transparent!important}.pageTitle,.screenTitle,h1{letter-spacing:0!important;font-weight:720!important}.pageSubtitle,.muted{color:#687980!important}.topActions{gap:8px!important;align-items:center!important} button,.secondary,.primary,.danger{border-radius:10px!important;font-weight:620!important;letter-spacing:0!important;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease!important}button:hover,.secondary:hover,.primary:hover{transform:none!important;box-shadow:0 8px 20px rgba(22,36,42,.10)!important}.primary{background:linear-gradient(180deg,#218675,#176f62)!important}.danger{background:#f7dddd!important;color:#9f2f35!important;border-color:#f0c7ca!important}.iconBtn{width:42px!important;height:42px!important;border-radius:12px!important;display:inline-grid!important;place-items:center!important;font-size:18px!important} input,select,textarea,.richInput{border-radius:10px!important;border-color:#cbd8d2!important;background:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important}input:hover,select:hover,textarea:hover,.richInput:hover{border-color:#9db8af!important}input:focus,select:focus,textarea:focus,.richInput:focus{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(31,126,112,.13)!important} .card,.taskCard,.calculationCard,.calendarDueItem,.chatConversationItem{border-radius:12px!important;background:linear-gradient(180deg,#fff,#fbfdfc)!important}.card{padding:11px 12px!important;min-height:auto!important}.cardContent{padding-right:32px!important}.card .downloadBtn,.card button[data-download-id]{font-size:12px!important;padding:7px 10px!important}.cardResponsible,.responsibleBadge{margin-left:auto!important;justify-self:end!important}.cardMeta{align-items:flex-end!important}.cardMeta .managerBadge:last-child{margin-left:auto!important}.cardDeadline,.workBadge,.managerBadge,.taskMetaTile,.calendarEventPill{border-radius:999px!important;font-weight:560!important;line-height:1.25!important}.card h4{font-size:13.5px!important;line-height:1.22!important}.cardNumber{font-weight:520!important}.column{background:rgba(255,255,255,.54)!important}.columnHeader{border-radius:12px 12px 0 0!important;padding:10px 12px!important}.cards{padding:10px!important;gap:8px!important} .orderForm{max-width:min(1040px,calc(100vw - 38px))!important}.orderForm .clientInfoBlock{background:linear-gradient(180deg,#fbfefd,#f7fbf9)!important}.orderForm>.formGrid{align-items:start!important}.orderForm>.formGrid>label{min-width:0}.orderForm .formGrid input,.orderForm .formGrid select{min-height:42px!important}.orderForm textarea#workName{min-height:74px!important}.orderForm .technicalBlock{display:grid!important;gap:12px!important}.orderForm .orderSection+ .orderSection{margin-top:10px!important}.chassisGrid{gap:10px!important}.chassisGrid label{min-width:0}.richInput{min-height:54px!important;max-height:none!important}.richInput .richParagraph{margin-bottom:12px!important}.historyBlock{margin-bottom:14px!important}.attachmentsBlock{margin-top:14px!important} .calendarLayout,.calendarMainGrid{align-items:start!important}.calendarPanel,.calendarSidePanel,.calendarDuePanel{border-radius:14px!important;box-shadow:var(--shadowSoft)!important}.calendarDay{border-radius:12px!important;transition:background .16s ease,border-color .16s ease,box-shadow .16s ease!important}.calendarDay:hover{box-shadow:0 8px 18px rgba(22,36,42,.08)!important}.calendarEventPill{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.calendarTooltip{z-index:999999!important;max-width:320px!important;white-space:normal!important;line-height:1.35!important}.calendarTooltip p{margin:0 0 6px!important}.calendarTooltip p:last-child{margin-bottom:0!important} .taskCard{cursor:grab!important}.taskCard .selectBox,.calculationCard .selectBox,.card .selectBox{cursor:pointer!important}.taskCardHeader,.taskCardMeta{min-width:0}.taskCard h3{font-size:13.8px!important;font-weight:640!important}.taskCard .taskMetaGrid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}.taskCard .taskMetaTile{min-width:0!important;padding:7px 9px!important}.taskCard .taskMetaTile strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:normal!important}.taskCompleteRow{cursor:pointer!important}.taskCompleteRow input{cursor:pointer!important}.taskDialogForm{max-width:min(980px,calc(100vw - 32px))!important;padding:18px 22px!important}.taskDialogForm textarea{min-height:118px!important}.taskDialogForm footer{margin-top:12px!important;padding-top:12px!important}.taskDueInlineCalendar,.datePickerPopover{position:fixed!important;z-index:999999!important} .chatScreen{gap:12px!important}.chatTabs{width:230px!important;min-width:230px!important}.chatTab{border-radius:12px!important}.chatListPanel,.chatDetail{box-shadow:var(--shadowSoft)!important}.chatDetail{min-width:0!important}.messagesPane,.chatMessages{background-color:#eaf4dc!important;background-image:linear-gradient(45deg,rgba(255,255,255,.24) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.18) 25%,transparent 25%)!important;background-size:26px 26px!important}.chatComposer{position:sticky!important;bottom:0!important;background:#fff!important;border-top:1px solid rgba(31,42,50,.1)!important;padding:10px!important;gap:8px!important}.chatComposer textarea{min-height:54px!important}.chatComposer button{height:40px!important;min-height:40px!important}.messageBubble{box-shadow:0 5px 14px rgba(22,36,42,.08)!important}.messageBubble.own{background:#ddffd4!important}.messageBubble:not(.own){background:#fff!important} .companyScreen,.stagesScreen,.payrollScreen{max-width:1440px!important;margin:0!important}.companyGrid,.settingsGrid{gap:12px!important}.settingsCard,.companyCard,.payrollCard{border-radius:14px!important;box-shadow:var(--shadowSoft)!important}.stageEditorRow,.userRow,.departmentRow{min-height:38px!important}.stageColorPicker{border-radius:10px!important}.payrollLayout{gap:12px!important;align-items:start!important}.payrollReportsPanel{width:260px!important}.payrollFrame,.payrollContent{border-radius:14px!important} .uiErrorToast{position:fixed;right:18px;bottom:18px;z-index:1000000;max-width:420px;padding:12px 14px;border:1px solid rgba(157,47,53,.22);border-radius:14px;background:#fff4f3;color:#8f2e32;box-shadow:0 18px 48px rgba(31,42,50,.18);font-weight:620}.uiErrorToast.hidden{display:none} @media(max-width:760px){.topActions{position:static!important;display:flex!important;flex-wrap:wrap!important}.board,.taskBoard,.calculationsBoard{grid-auto-columns:min(86vw,320px)!important}.chatScreen{grid-template-columns:1fr!important}.chatTabs{width:auto!important;min-width:0!important;display:flex!important;overflow-x:auto!important}.chatTab{min-width:180px!important}.calendarMainGrid{grid-template-columns:1fr!important}.calendarSidePanel,.calendarDuePanel{width:auto!important}.taskCard .taskMetaGrid{grid-template-columns:1fr!important}.orderForm,.taskDialogForm,.calculationForm{width:calc(100vw - 16px)!important;padding:14px!important}.iconBtn{width:38px!important;height:38px!important}} /* 20260727-10: restore chat resizing and compact card dates */ #chatScreen .chatShell{--chat-nav-w:220px;--chat-list-w:520px;display:grid!important;grid-template-columns:var(--chat-nav-w) 8px var(--chat-list-w) 8px minmax(480px,1fr)!important;gap:8px!important;height:calc(100vh - 112px)!important;min-height:560px!important;overflow:hidden!important;align-items:stretch!important} #chatScreen .chatTabs{width:auto!important;min-width:190px!important;max-width:none!important;resize:none!important;overflow:auto!important;padding:10px!important} #chatScreen .chatListPanel{min-width:300px!important;max-width:none!important;overflow:hidden!important} #chatScreen .chatThreadPanel,#chatScreen .chatDetail{min-width:420px!important;overflow:hidden!important} #chatScreen .chatResizeHandle{display:block!important;width:8px!important;min-width:8px!important;height:100%!important;border-radius:999px!important;background:rgba(31,126,112,.10)!important;cursor:col-resize!important;transition:background .16s ease,box-shadow .16s ease!important;align-self:stretch!important} #chatScreen .chatResizeHandle:hover,#chatScreen .chatResizeHandle.dragging{background:rgba(31,126,112,.24)!important;box-shadow:0 0 0 3px rgba(31,126,112,.08)!important} #chatScreen .chatTab{min-height:54px!important;padding:9px 10px!important} #chatScreen .chatTab span{line-height:1.18!important} .card .cardMeta{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;gap:5px!important;margin-top:6px!important;padding-right:0!important} .card .productionTimers{display:flex!important;align-items:flex-start!important;justify-content:flex-start!important;gap:5px!important;margin-top:6px!important;flex-wrap:wrap!important} .card .productionTimers .timerChip,.card .cardMeta .chip{max-width:100%!important;white-space:normal!important;text-align:left!important} .card .cardFooter{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;margin:8px 0 0!important;padding-top:8px!important;border-top:1px solid rgba(31,42,50,.08)!important;min-height:0!important} .card .cardFooter .cardActions{display:flex!important;align-items:center!important;gap:6px!important;margin:0!important;min-width:0!important;flex:0 1 auto!important} .card .cardFooter .chipPerson{margin-left:auto!important;max-width:96px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} .card .cardDownloadBtn{min-height:30px!important;padding:0 10px!important;white-space:nowrap!important} @media(max-width:1050px){#chatScreen .chatShell{grid-template-columns:1fr!important;height:auto!important;overflow:visible!important}#chatScreen .chatResizeHandle{display:none!important}#chatScreen .chatTabs{display:grid!important;grid-template-columns:1fr 1fr!important;min-width:0!important}#chatScreen .chatListPanel,#chatScreen .chatThreadPanel,#chatScreen .chatDetail{min-width:0!important}} /* 20260727-11: remove date/timer dead space on order cards */ .card{gap:0!important;padding-bottom:10px!important} .cardTop{display:block!important} .cardContent{display:flex!important;flex-direction:column!important;gap:0!important;padding-right:32px!important} .cardContent>div:first-child{margin:0 0 7px!important} .cardContent h4{margin:0 0 3px!important}.cardContent p{margin:1px 0 0!important}.cardNumber{margin:2px 0 0!important} .card .cardMeta{display:flex!important;align-items:center!important;gap:5px!important;margin:0!important;padding:0!important;line-height:1!important} .card .cardMeta:empty{display:none!important} .card .productionTimers{display:flex!important;align-items:center!important;gap:5px!important;margin:5px 0 0!important;padding:0!important;line-height:1!important} .card .productionTimers:empty{display:none!important} .card .chip,.card .timerChip{margin:0!important;min-height:22px!important;padding:4px 8px!important;line-height:1.12!important;display:inline-flex!important;align-items:center!important;justify-content:center!important} .card .timerChip{flex-direction:row!important;gap:3px!important;white-space:normal!important;box-shadow:none!important} .card .timerChip small{display:inline!important;margin:0!important;line-height:1.12!important} .card .cardFooter{margin:9px 0 0!important;padding-top:8px!important;min-height:0!important;line-height:1!important} .card .cardActions,.card .cardFooter .cardActions{margin:0!important;padding:0!important;line-height:1!important} .card .cardDownloadBtn{height:31px!important;min-height:31px!important;line-height:29px!important;padding:0 11px!important} /* 20260727-12: stable card footer alignment */ .card .cardFooter{display:grid!important;grid-template-columns:max-content minmax(0,1fr) max-content!important;align-items:center!important;column-gap:8px!important;margin:9px 0 0!important;padding-top:8px!important;border-top:1px solid rgba(31,42,50,.08)!important;width:100%!important;box-sizing:border-box!important} .card .cardFooter .cardActions{grid-column:1!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;margin:0!important;padding:0!important;min-width:0!important;line-height:1!important} .card .cardFooter .chipPerson{grid-column:3!important;justify-self:end!important;align-self:center!important;margin:0!important;max-width:96px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;line-height:1!important} .card .cardDownloadBtn{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:31px!important;min-height:31px!important;line-height:1!important;padding:0 12px!important;text-align:center!important;vertical-align:middle!important;white-space:nowrap!important} .card .cardFooter>span:first-child:empty{display:none!important} /* 20260727-13: lock responsible badge to card right edge Important: cardContent keeps right padding for the top checkbox. The footer must compensate that padding, otherwise the responsible badge will always sit too far left. Do not remove width/margin-right below. */ .card .cardContent{padding-right:32px!important} .card .cardFooter{width:calc(100% + 32px)!important;margin:9px -32px 0 0!important;display:grid!important;grid-template-columns:max-content 1fr max-content!important;align-items:center!important;column-gap:8px!important;box-sizing:border-box!important} .card .cardFooter .cardActions{grid-column:1!important;justify-self:start!important;min-width:0!important} .card .cardFooter .chipPerson{grid-column:3!important;justify-self:end!important;margin:0!important;max-width:112px!important;text-align:right!important} .card .cardFooter .chipPerson:empty{display:none!important} @media(max-width:900px){.card .cardFooter{width:100%!important;margin:9px 0 0!important}.card .cardFooter .chipPerson{max-width:45%!important}} /* 20260727-15: service pricing calculator */ .navBtn[data-screen="pricing"]::before,.navBtn[data-screen=pricing]::before{content:"P"}.pricingRoot{max-width:1280px}.pricingShell{display:grid;gap:14px}.pricingPanel{border:1px solid rgba(18,28,34,.10);border-radius:14px;background:rgba(255,255,255,.80);box-shadow:0 12px 34px rgba(18,28,34,.07);padding:16px}.pricingHero{display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(230,244,240,.86))}.pricingHero h3{font-size:22px;margin-bottom:6px;font-weight:720}.pricingHero p{max-width:820px;line-height:1.45}.pricingTotalBox{min-width:270px;border:1px solid rgba(31,126,112,.18);border-radius:14px;background:#f3fbf8;padding:14px 16px;text-align:right}.pricingTotalBox span{display:block;color:#687980;font-size:13px;font-weight:700}.pricingTotalBox strong{display:block;margin-top:4px;color:#0e665b;font-size:24px;font-weight:720}.pricingControls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}.pricingRows{display:grid;gap:8px}.pricingRow{display:grid;grid-template-columns:34px minmax(220px,1fr) minmax(220px,1.2fr) 86px 150px 150px 44px;gap:8px;align-items:center;padding:8px;border:1px solid rgba(18,28,34,.08);border-radius:12px;background:#fff}.pricingRow.pricingHead{padding:0 8px;border:0;background:transparent;color:#607178;font-size:12px;font-weight:720;text-transform:uppercase;letter-spacing:.02em}.pricingIndex{width:28px;height:28px;border-radius:999px;display:grid;place-items:center;background:#eef6f3;color:#0f6259;font-weight:720;font-size:13px}.pricingNameInput,.pricingPriceInput,.pricingQtyInput,.pricingServiceSelect{min-height:40px}.pricingQtyInput,.pricingPriceInput{text-align:right;font-variant-numeric:tabular-nums}.pricingLineTotal{text-align:right;color:#0e665b;font-weight:720;font-variant-numeric:tabular-nums}.pricingRemoveBtn,.pricingBaseDelete{width:40px!important;height:40px!important;border-color:#f0c7ca!important;background:#f8e1e3!important;color:#9f2f35!important}.pricingBasePanel{display:grid;gap:12px}.pricingBaseHead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.pricingBaseHead h3{font-size:20px;font-weight:720}.pricingBaseGroup{display:grid;gap:7px;padding-top:8px;border-top:1px solid rgba(18,28,34,.08)}.pricingBaseGroup h4{font-size:15px;color:#0f6259;font-weight:720}.pricingBaseRow{display:grid;grid-template-columns:220px minmax(260px,1fr) 160px 44px;gap:8px;align-items:center;padding:7px;border:1px solid rgba(18,28,34,.08);border-radius:11px;background:#fff}.pricingBaseRow input,.pricingBaseRow select{min-height:38px}.pricingBasePrice{text-align:right}@media(max-width:1100px){.pricingRow{grid-template-columns:30px minmax(0,1fr) minmax(0,1fr);}.pricingRow.pricingHead{display:none}.pricingQtyInput,.pricingPriceInput,.pricingLineTotal,.pricingRemoveBtn{grid-column:auto}.pricingBaseRow{grid-template-columns:1fr}}@media(max-width:760px){.pricingHero,.pricingBaseHead{display:grid}.pricingTotalBox{text-align:left;min-width:0}.pricingRow{grid-template-columns:28px minmax(0,1fr)}.pricingServiceSelect,.pricingNameInput,.pricingQtyInput,.pricingPriceInput,.pricingLineTotal,.pricingRemoveBtn{grid-column:2}.pricingQtyInput,.pricingPriceInput,.pricingLineTotal{text-align:left}} /* 20260727-16: pricing search rows and client total */ .servicePricing .pricingTotalBox{display:grid;gap:10px;text-align:left;min-width:320px} .pricingTotalLine{display:flex;align-items:center;justify-content:space-between;gap:14px} .pricingTotalLine strong{margin:0;text-align:right;font-size:18px} .pricingClientLine{padding-top:8px;border-top:1px solid rgba(18,28,34,.10)} .pricingClientLine strong{font-size:22px;color:#0e665b} .pricingMarginLabel{display:grid;grid-template-columns:1fr minmax(150px,190px);align-items:center;gap:12px} .pricingMarginLabel input{min-height:38px;text-align:right;font-variant-numeric:tabular-nums} .servicePricing .pricingRow{grid-template-columns:34px minmax(340px,1.8fr) 86px 150px 150px 44px} .servicePricing .pricingServiceSearch{min-height:40px} .servicePricing .pricingLineTotal{white-space:nowrap} .servicePricing .pricingHead span{align-self:center} @media(max-width:1100px){ .servicePricing .pricingRow{grid-template-columns:30px minmax(0,1fr) 120px} .servicePricing .pricingServiceSearch{grid-column:2/4} } @media(max-width:760px){ .servicePricing .pricingTotalBox{min-width:0} .pricingMarginLabel,.pricingTotalLine{display:grid;grid-template-columns:1fr} .pricingTotalLine strong,.pricingMarginLabel input{text-align:left} .servicePricing .pricingRow{grid-template-columns:28px minmax(0,1fr)} .servicePricing .pricingServiceSearch,.servicePricing .pricingQtyInput,.servicePricing .pricingPriceInput,.servicePricing .pricingLineTotal,.servicePricing .pricingRemoveBtn{grid-column:2} } /* Unified date picker layer */ dialog:has(.datePickerPopover:not(.hidden)), dialog.datePickerHostOpen{overflow:visible!important} .datePickerPopover{z-index:2147483647!important} .taskDueInlineCalendar{display:none!important} /* Date picker must be above opened card dialogs */ dialog.datePickerHostOpen{overflow:visible!important} dialog.datePickerHostOpen .datePickerPopover{position:absolute!important;z-index:2147483647!important} /* Final toolbar/date-picker guards */ .toolbar{display:grid!important;grid-template-columns:minmax(280px,1fr) 220px auto auto!important;align-items:center!important} .toolbarSearch{width:100%!important;min-width:0!important} #funnelSelect{width:220px!important;min-width:220px!important;max-width:220px!important} #orderViewMode{width:auto!important;min-width:112px!important;max-width:140px!important} #addLeadBtn{white-space:nowrap!important} body>.datePickerPopover{position:fixed!important} dialog.datePickerHostOpen .datePickerPopover{position:absolute!important} @media(max-width:900px){ .toolbar{grid-template-columns:1fr!important} #funnelSelect,#orderViewMode{width:100%!important;min-width:0!important;max-width:none!important} } /* Active date picker anchoring: dialog popovers are placed relative to the dialog. */ dialog.datePickerHostOpen{position:relative!important;overflow:visible!important} #orderDialog.datePickerHostOpen .datePickerPopover, #taskDialog.datePickerHostOpen .datePickerPopover, #calculationDialog.datePickerHostOpen .datePickerPopover, dialog.datePickerHostOpen .datePickerPopover{position:absolute!important;z-index:2147483647!important} /* User picker: the whole employee tile must toggle the checkbox. */ .userPicker .userPick{pointer-events:auto!important;display:flex!important;align-items:center!important;gap:10px!important;min-height:42px!important;width:100%!important;cursor:pointer!important} .userPicker .userPick input, .userPicker .userPick span{pointer-events:none!important} /* 20260727-23: pricing base sorting and bulk row actions */ .servicePricing .pricingRow{grid-template-columns:34px minmax(320px,1.8fr) 86px 150px 150px 44px!important} .servicePricing .pricingHead{grid-template-columns:34px minmax(320px,1.8fr) 86px 150px 150px 44px!important} .pricingBulkBar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:10px;border:1px solid rgba(18,28,34,.08);border-radius:12px;background:#f7faf8} .pricingBulkBar input{min-height:38px;max-width:150px} .pricingBulkBar button{min-height:38px} .pricingBulkBar button:disabled,.pricingBulkBar input:disabled{opacity:.45;cursor:not-allowed} .servicePricing .pricingServiceSearch{min-width:0} .pricingBaseRow{grid-template-columns:30px 220px minmax(260px,1fr) 160px 44px!important} .pricingCheck{width:28px;height:28px;border:1px solid var(--lineStrong);border-radius:8px;background:#fff;display:grid!important;place-items:center;cursor:pointer;margin:0!important;box-shadow:0 3px 10px rgba(18,28,34,.06)} .pricingCheck input{appearance:none!important;-webkit-appearance:none!important;width:18px!important;height:18px!important;min-height:18px!important;margin:0!important;padding:0!important;border:1px solid var(--lineStrong)!important;border-radius:5px!important;background:#fff!important;display:grid!important;place-items:center!important;cursor:pointer!important} .pricingCheck input:checked{border-color:var(--primary)!important;background:var(--primary)!important} .pricingCheck input:checked:after{content:"✓";color:#fff;font-size:12px;font-weight:700;line-height:1} .pricingCheck:hover input{border-color:var(--primary)!important;box-shadow:0 0 0 3px rgba(31,107,95,.10)!important} @media(max-width:1100px){ .servicePricing .pricingRow{grid-template-columns:30px minmax(0,1fr) 120px!important} .servicePricing .pricingHead{display:none!important} .servicePricing .pricingServiceSearch{grid-column:2/4} .servicePricing .pricingQtyInput,.servicePricing .pricingPriceInput,.servicePricing .pricingLineTotal,.servicePricing .pricingRemoveBtn{grid-column:2/4} .pricingBaseRow{grid-template-columns:30px 1fr!important} .pricingBaseRow .pricingBaseCategory,.pricingBaseRow .pricingBaseName,.pricingBaseRow .pricingBasePrice,.pricingBaseRow .pricingBaseDelete{grid-column:2} } @media(max-width:760px){ .servicePricing .pricingRow{grid-template-columns:28px minmax(0,1fr)!important} .servicePricing .pricingServiceSearch,.servicePricing .pricingQtyInput,.servicePricing .pricingPriceInput,.servicePricing .pricingLineTotal,.servicePricing .pricingRemoveBtn{grid-column:2} .pricingBulkBar{display:grid;grid-template-columns:1fr 1fr} .pricingBulkBar input,.pricingBulkBar .selectAllControl{grid-column:1/-1} } /* 20260727-24: document formatting */ .documentEditorShell{display:grid;grid-template-columns:minmax(320px,460px) minmax(360px,1fr);gap:16px;align-items:start;max-width:1180px} .documentFormatPanel,.documentRulesPanel{border-radius:16px!important;background:rgba(255,255,255,.86)!important;box-shadow:var(--shadowSoft)!important} .documentFormatPanel{display:grid;gap:14px} .documentFormatPanel h3,.documentRulesPanel h3{font-size:20px;font-weight:720;margin:0 0 4px} .documentDrop{display:grid;gap:8px;padding:18px;border:1px dashed rgba(31,126,112,.35);border-radius:14px;background:#f7fbf9;cursor:pointer} .documentDrop:hover{border-color:var(--primary);background:#f1faf6} .documentDrop input{display:none} .documentDrop span{display:inline-flex;align-items:center;justify-content:center;min-height:42px;width:max-content;padding:0 14px;border-radius:10px;background:#fff;border:1px solid var(--lineStrong);font-weight:650;color:#16332f} .documentDrop small{color:#667980;font-weight:520;overflow-wrap:anywhere} .documentFormatPanel .primary{width:max-content} .documentRulesList{display:grid;gap:8px} .documentRule{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1px solid rgba(18,28,34,.08);border-radius:12px;background:#fbfdfc} .documentRule b{display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:#e4f2ef;color:#12685e;font-size:12px} .documentRule span{line-height:1.42;color:#23323a;font-weight:470} @media(max-width:900px){.documentEditorShell{grid-template-columns:1fr}.documentFormatPanel .primary,.documentDrop span{width:100%}} /* 20260728: compact selected-day panel in calendar */ .calendarEditor{display:grid!important;align-content:start!important;gap:10px!important;padding:16px!important} .calendarEditor #selectedDateTitle{margin:0!important;line-height:1.2!important} .calendarEditor #dayNotesList{display:grid!important;gap:9px!important} .calendarEditor #dayNotesList h4{margin:4px 0 0!important;font-size:15px!important;line-height:1.2!important} .calendarEditor .calendarTasksDetails{margin:0!important} .calendarEditor .calendarTasksDetails summary{padding:9px 11px!important} .calendarEditor .calendarTasksDetails .emptyNote{padding:8px 11px!important} .calendarEditor .dayNotesList{display:grid!important;gap:7px!important;margin:0!important} .calendarEditor .dayOrder,.calendarEditor .dayNote{margin:0!important;padding:10px 12px!important} .calendarEditor .dayOrder strong,.calendarEditor .dayNote strong{line-height:1.25!important} .calendarEditor .dayOrder p,.calendarEditor .dayNote p{margin-top:4px!important;line-height:1.3!important} .calendarEditor>label{display:grid!important;gap:6px!important;margin:0!important} .calendarEditor textarea#calendarNoteText{min-height:108px!important} .calendarEditor .actions{margin-top:0!important} /* 20260728: view switcher must stay top-left in orders toolbar */ #ordersScreen .toolbar{grid-template-columns:auto minmax(280px,1fr) 220px auto!important;align-items:center!important} #ordersScreen .viewModeToggle{grid-column:1!important;justify-self:start!important} #ordersScreen .toolbarSearch{grid-column:2!important} #ordersScreen #funnelSelect{grid-column:3!important} #ordersScreen #addLeadBtn{grid-column:4!important} @media(max-width:900px){#ordersScreen .toolbar{grid-template-columns:1fr!important}#ordersScreen .viewModeToggle,#ordersScreen .toolbarSearch,#ordersScreen #funnelSelect,#ordersScreen #addLeadBtn{grid-column:auto!important;width:100%!important}} /* 20260728: list modes for tasks and calculations */ #tasksScreen .taskToolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:12px!important} #tasksScreen .taskViewToggle{margin-right:auto} #calculationsScreen .calculationToolbar{align-items:flex-end} #calculationsScreen .calculationToolbarActions{flex-wrap:wrap;justify-content:flex-end} #calculationsScreen .calculationViewToggle{order:-2} #calculationsScreen #calculationSearch{order:-1} .taskBoard.taskList,.calculationBoard.calculationList{display:grid!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;grid-template-columns:1fr!important;height:auto!important;min-height:360px!important;overflow:visible!important;gap:8px!important;padding:2px!important} .taskListRow,.calculationListRow{display:grid;grid-template-columns:34px minmax(240px,1.55fr) minmax(120px,.7fr) minmax(145px,.8fr) minmax(150px,.85fr) minmax(145px,.8fr) minmax(120px,.65fr);align-items:center;gap:10px;padding:10px 12px;border:1px solid #dce5e1;border-radius:12px;background:rgba(255,255,255,.92);box-shadow:0 5px 14px rgba(22,45,38,.045);cursor:pointer} .taskListRow:hover,.calculationListRow:hover{border-color:#9dbbb2;background:#fbfdfc} .taskListRow.selected,.calculationListRow.selected{border-color:var(--primary);box-shadow:0 0 0 2px rgba(31,107,95,.12)} .taskListRow .listSelect,.calculationListRow .listSelect{justify-self:center;cursor:pointer} .listMain{display:grid;gap:3px;min-width:0} .listMain strong{font-size:14px;font-weight:650;line-height:1.25;color:#152228;overflow-wrap:anywhere} .listMain span{font-size:12px;line-height:1.35;color:#637179;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .listCell{display:grid;gap:2px;min-width:0} .listCell span{font-size:11px;font-weight:650;color:#77848b} .listCell b{font-size:12px;font-weight:600;color:#213037;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .listCell em{width:max-content;max-width:100%;font-style:normal;font-size:11px;font-weight:650;line-height:1.2;padding:4px 7px;border-radius:999px;background:#e8f4f1;color:#0b6154;white-space:nowrap} .listDone{justify-self:end} .listEmpty{border:1px dashed #cad8d2;border-radius:12px;background:rgba(255,255,255,.7);padding:18px;color:#66747b} @media(max-width:1100px){.taskListRow,.calculationListRow{grid-template-columns:30px minmax(210px,1fr) minmax(120px,.7fr) minmax(130px,.75fr);align-items:start}.taskListRow .listCell:nth-of-type(n+4),.calculationListRow .listCell:nth-of-type(n+4){display:none}.listDone{justify-self:start}} @media(max-width:760px){#tasksScreen .taskToolbar,#calculationsScreen .calculationToolbar,#calculationsScreen .calculationToolbarActions{display:grid!important;grid-template-columns:1fr!important;align-items:stretch!important}#calculationsScreen #calculationSearch{width:100%!important}.taskListRow,.calculationListRow{grid-template-columns:30px 1fr;gap:8px}.taskListRow .listCell,.calculationListRow .listCell,.listDone{grid-column:2}.taskListRow .listCell:nth-of-type(n),.calculationListRow .listCell:nth-of-type(n){display:grid}} /* 20260728: shipped orders are shown as completed, not as ordinary overdue cards */ .timerShipped{background:#dff3e9;color:#176043;border:1px solid rgba(23,96,67,.14);box-shadow:0 4px 10px rgba(23,96,67,.08)} .timerShipped.ontime{background:#dff3e9;color:#176043} .timerShipped.early{background:#e2f4f1;color:#12574e} .timerShipped.late{background:#f4e3dc;color:#8b3424} .card.cardShipped{background:linear-gradient(180deg,rgba(232,248,238,.78),rgba(246,252,248,.64));border-color:rgba(38,139,91,.38);box-shadow:0 10px 24px rgba(38,139,91,.10)} .card.cardShipped:hover{border-color:rgba(38,139,91,.58);box-shadow:0 12px 28px rgba(38,139,91,.14)} .card.cardShipped .cardTop{background:transparent} .card.cardShipped .cardMeta .chipDate{background:#dff3e9;color:#176043} .timerShipped{display:grid;grid-template-columns:1fr 1fr;gap:5px;width:100%;padding:5px;background:rgba(222,244,232,.9)} .timerShippedPart{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:3px 6px;border-radius:7px;background:rgba(255,255,255,.62)} .timerShippedPart small{font-size:10px;color:rgba(23,96,67,.72)} .timerShippedPart b{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .timerShipped.late .timerShippedPart small{color:rgba(139,52,36,.72)} /* 20260728: stronger completed-card treatment and readable shipped summary */ .card.cardShipped{background:linear-gradient(180deg,rgba(219,246,229,.96),rgba(235,250,241,.9))!important;border-color:rgba(29,132,82,.56)!important;border-left-color:#1d8452!important} .card.cardShipped .cardContent{padding-right:26px} .card.cardShipped .productionTimers{margin-top:8px} .card.cardShipped .cardFooter{margin-right:0!important;border-top-color:rgba(29,132,82,.18)!important} .card.cardShipped .cardFooter .chipPerson{margin-left:auto!important;max-width:96px!important} .card.cardShipped .timerShipped{display:grid!important;grid-template-columns:1fr!important;gap:5px!important;width:100%;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#176043} .card.cardShipped .timerShippedPart{display:grid!important;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;min-height:27px;padding:5px 8px;border:1px solid rgba(29,132,82,.16);border-radius:8px;background:rgba(255,255,255,.72)} .card.cardShipped .timerShippedPart small{font-size:10px;font-weight:700;line-height:1;color:rgba(23,96,67,.68);white-space:nowrap} .card.cardShipped .timerShippedPart b{min-width:0;font-size:11px;font-weight:650;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .card.cardShipped .timerShipped.late .timerShippedPart{border-color:rgba(29,132,82,.16);background:rgba(255,255,255,.72)} .card.cardShipped .timerShipped.late .timerShippedPart:last-child b{color:#a12b2b} /* 20260728: order finance for leadership */ .financeSummary{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:10px;margin:0 0 12px} .financeMetric{display:flex;align-items:center;gap:10px;min-height:58px;padding:10px 12px;border:1px solid rgba(31,107,95,.14);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(243,250,247,.88));box-shadow:0 6px 16px rgba(22,45,38,.045)} .financeMetric>span{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#e4f1ef;color:#12574e;font-size:15px;font-weight:750} .financeMetric div{display:grid;gap:2px;min-width:0} .financeMetric small{color:#66747b;font-size:11px;font-weight:650} .financeMetric b{color:#16242a;font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orderFinanceBlock{padding:14px!important} .orderFinanceBlock .financeGrid{grid-template-columns:repeat(3,minmax(0,1fr));padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important} .orderFinanceBlock input[readonly]{background:#f5f8f6;color:#1f6b5f;font-weight:700} @media(max-width:900px){.financeSummary{grid-template-columns:1fr}.orderFinanceBlock .financeGrid{grid-template-columns:1fr}} /* 20260728: compact finance marker inside order cards */ .cardFinanceChip{ display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:7px; width:min(100%,205px); margin:6px 0 0 auto; padding:7px 8px; border:1px solid rgba(31,107,95,.14); border-radius:10px; background:rgba(255,255,255,.76); box-shadow:0 4px 12px rgba(18,28,34,.035); } .cardFinanceChip .financeIcon{ display:grid; place-items:center; width:28px; height:28px; border-radius:8px; background:#e4f1ef; color:#12574e; font-weight:760; } .cardFinanceChip b{ display:block; color:#162229; font-size:12px; font-weight:680; line-height:1.15; } .cardFinanceChip small{ display:block; color:#66747b; font-size:10.5px; font-weight:620; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cardFinanceChip.empty strong{ color:#66747b; font-size:11.5px; font-weight:650; line-height:1.2; } .card.cardShipped .cardFinanceChip{ background:rgba(255,255,255,.62); border-color:rgba(29,132,82,.16); } /* 20260728: final visible state for "select all" and stage checkboxes. */ .selectAllControl input[type="checkbox"], .stageSelectControl input[type="checkbox"]{ appearance:none!important; -webkit-appearance:none!important; display:grid!important; place-items:center!important; width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; margin:0!important; padding:0!important; border:1px solid #176f64!important; border-radius:5px!important; background:#fff!important; box-shadow:none!important; cursor:pointer!important; } .selectAllControl input[type="checkbox"]:checked, .stageSelectControl input[type="checkbox"]:checked, .selectAllControl input[type="checkbox"]:indeterminate, .stageSelectControl input[type="checkbox"]:indeterminate{ background:#176f64!important; border-color:#176f64!important; } .selectAllControl input[type="checkbox"]:checked::after, .stageSelectControl input[type="checkbox"]:checked::after{ content:"✓"!important; color:#fff!important; font-size:13px!important; font-weight:800!important; line-height:1!important; } .selectAllControl input[type="checkbox"]:indeterminate::after, .stageSelectControl input[type="checkbox"]:indeterminate::after{ content:"−"!important; color:#fff!important; font-size:14px!important; font-weight:800!important; line-height:1!important; } .mailRoot{min-height:calc(100vh - 130px)} .mailLayout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} .mailPanel{padding:18px} .mailHead{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;margin-bottom:14px} .mailHead h3{margin:0 0 4px;font-size:20px;font-weight:650} .mailHead select{min-width:220px} .mailNotice,.mailError{border-radius:10px;padding:12px 14px;margin:12px 0;background:#fff6df;color:#7a4b00;border:1px solid #f0d9a8} .mailError{background:#fde9e9;color:#9b2727;border-color:#f2c3c3} .mailMessages{display:grid;gap:10px} .mailMessage{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 14px;box-shadow:0 8px 22px rgba(31,42,50,.05)} .mailMessage.unread{border-color:#1f7a6a;box-shadow:0 0 0 1px rgba(31,122,106,.15)} .mailMessageTop{display:flex;gap:12px;justify-content:space-between;align-items:flex-start} .mailMessageTop strong{font-size:15px;font-weight:650;line-height:1.25} .mailMessageTop span,.mailFrom{color:var(--muted);font-size:12px} .mailMessage p{margin:8px 0 0;color:#334047;line-height:1.45} .mailSettingsRow{grid-column:1/-1;border:1px solid var(--line);border-radius:10px;background:#fbfdfc;padding:8px 10px} .mailSettingsRow summary{cursor:pointer;font-weight:650;color:#1f6b5f} .mailSettingsGrid{display:grid;grid-template-columns:1.2fr .45fr .35fr 1.2fr 1fr;gap:8px;margin-top:10px} .mailSecureToggle{display:flex!important;align-items:center;gap:6px;margin:0!important} .mailSecureToggle input{width:auto!important} .companyMailPanel{padding:18px} .companyMailLayout{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px;align-items:start} .companyMailUsers{display:grid;gap:8px} .companyMailUser{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;background:#fff;padding:11px 12px;text-align:left;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s} .companyMailUser:hover{border-color:rgba(31,122,106,.35);background:#f8fcfb} .companyMailUser.active{border-color:#1f7a6a;background:#edf8f5;box-shadow:0 0 0 1px rgba(31,122,106,.1)} .companyMailUser span{font-weight:650;color:var(--text)} .companyMailUser small{color:var(--muted);white-space:nowrap} .companyMailForm{display:grid;gap:12px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px} .companyMailForm h4{margin:0;font-size:18px;font-weight:650} .companyMailForm label{display:grid;gap:6px;color:var(--muted);font-weight:650} .companyMailForm input{width:100%} .companyMailTwo{display:grid;grid-template-columns:minmax(120px,180px) minmax(120px,160px);gap:12px;align-items:end} .companyMailCheck{display:flex!important;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--text)!important} .companyMailCheck input{width:auto} .companyMailActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .companyMailActions button{min-height:40px} .mailStatus{border:1px solid var(--line);border-radius:10px;background:#f7fbfa;padding:10px 12px;color:#1f6b5f;font-weight:650} @media (max-width:900px){.mailHead{display:grid}.mailHead select,.mailHead button{width:100%}.mailSettingsGrid{grid-template-columns:1fr}} @media (max-width:900px){.companyMailLayout{grid-template-columns:1fr}.companyMailTwo{grid-template-columns:1fr}} /* Mail client layout */ .navBtn[data-screen="mail"]{ display:flex; align-items:center; } .navBtn[data-screen="mail"]::before{ content:"✉"; display:inline-grid; place-items:center; flex:0 0 26px; width:26px; height:26px; margin-right:0; border-radius:7px; background:rgba(255,255,255,.08); font-size:13px; line-height:1; } .mailRoot{ min-height:calc(100vh - 132px); } .mailLayout{ display:grid; grid-template-columns:minmax(300px,420px) minmax(0,1fr); grid-template-rows:auto minmax(520px,calc(100vh - 245px)); gap:14px; align-items:stretch; } .mailToolbar{ grid-column:1/-1; padding:16px 18px; } .mailToolbar .mailHead{ margin:0; } .mailToolbarActions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; } .mailToolbarActions select{ min-width:220px; } .mailReaderActions{ display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; } .mailCompose{ display:grid; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); background:#f8fcfb; } .mailComposeTitle{ font-size:16px; font-weight:650; color:var(--text); } .mailComposeGrid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .mailCompose label{ display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:650; } .mailCompose textarea{ min-height:120px; resize:vertical; } .mailComposeActions{ display:flex; justify-content:flex-end; gap:8px; } .mailInbox, .mailReader{ padding:0; overflow:hidden; min-height:520px; height:calc(100vh - 245px); } .mailInboxHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); } .mailFolders{ display:flex; flex-wrap:wrap; gap:8px; padding:12px; border-bottom:1px solid var(--line); background:#fbfdfc; } .mailFolderBtn{ min-height:34px; padding:0 11px; border:1px solid var(--line); border-radius:999px; background:#fff; color:var(--muted); font-size:13px; font-weight:650; } .mailFolderBtn:hover{ border-color:rgba(31,122,106,.38); background:#f5fbf9; color:var(--primaryDark); } .mailFolderBtn.active{ border-color:#1f7a6a; background:#e8f5f2; color:#176f64; } .mailInboxHead strong{ font-size:17px; font-weight:650; } .mailInboxHead span{ display:inline-grid; place-items:center; min-width:28px; height:28px; border-radius:999px; color:#176f64; background:#e8f5f2; font-weight:700; } .mailInbox .mailMessages{ display:flex; flex-direction:column; gap:8px; height:calc(100% - 116px); padding:12px; overflow:auto; } .mailMessage{ width:100%; text-align:left; cursor:pointer; border:1px solid var(--line); border-radius:14px; background:#fff; padding:12px 13px; box-shadow:0 8px 20px rgba(31,42,50,.045); transition:border-color .15s,background .15s,box-shadow .15s,transform .15s; } .mailMessage:hover{ border-color:rgba(31,122,106,.38); background:#f8fcfb; transform:translateY(-1px); } .mailMessage.active{ border-color:#1f7a6a; background:#eef8f5; box-shadow:0 0 0 1px rgba(31,122,106,.12),0 12px 26px rgba(31,42,50,.07); } .mailMessage.unread .mailMessageTop strong::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:7px; background:#1f7a6a; vertical-align:1px; } .mailMessageTop{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; } .mailMessageTop strong{ min-width:0; font-size:14px; font-weight:650; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mailMessageTop span, .mailFrom{ color:var(--muted); font-size:12px; } .mailFrom{ margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mailMessage p{ margin:8px 0 0; color:#45545b; font-size:13px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .mailEmpty{ padding:12px; } .mailReader{ display:flex; flex-direction:column; } .mailReaderHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:18px 20px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fff,#fbfdfc); } .mailReaderHead h3{ margin:0; font-size:20px; font-weight:650; line-height:1.25; } .mailReaderHead p{ margin:6px 0 0; color:var(--muted); } .mailReaderHead span{ color:var(--muted); font-size:12px; white-space:nowrap; } .mailBody{ flex:1; overflow:auto; padding:22px 24px 30px; background:#fff; color:#1f2a31; font-size:15px; line-height:1.62; white-space:pre-wrap; overflow-wrap:anywhere; } .mailHtmlFrame{ flex:1; width:100%; min-height:0; border:0; background:#fff; } .mailReaderEmpty{ height:100%; display:grid; place-content:center; text-align:center; padding:30px; } .mailReaderEmpty h3{ margin:0 0 6px; font-size:22px; font-weight:650; } @media (max-width:900px){ .mailLayout{ grid-template-columns:1fr; grid-template-rows:auto auto auto; } .mailInbox, .mailReader{ height:auto; min-height:360px; } .mailInbox .mailMessages{ max-height:420px; } .mailReaderHead{ display:grid; } } .brandIcon{overflow:hidden;background:#102135!important;padding:0} .brandIcon img{display:block;width:100%;height:100%;object-fit:cover}