/* Nexora — Recruitment Calendar (יומן גיוס) · NEXORA language, ported from the approved tasks screen (css/tasks-nx.css + js/40-tasks-nx.js). Scoped to #recruitmentCalendarModal (.rc-nx container) and the detail modal #rcEventDetailModal. Tokens ALIAS the system palette — NO new palette, no hardcoded hex for brand/surface. Self-contained copy so the live tasks screen (#v-tasks) is never touched. The old .rc-* block in styles.css is intentionally LEFT in place: renderDealRecruitmentTimeline injects .rc-timeline* into the DEAL CARD (not this modal) and branch-settings still use .rc-perm-badge. */ #recruitmentCalendarModal, #rcEventDetailModal, #rcEventModal{ --brand:var(--primary,#009391);--accent:var(--secondary,#00D1C9); --surface:var(--card-bg,#fff);--raised:var(--bg-secondary,#F4F6F8); --rtext:var(--text,#0E1316);--muted:var(--text-light,#5A6B74); --line:color-mix(in srgb,var(--text,#0E1316) 12%,transparent); --grid:color-mix(in srgb,var(--brand) 13%,transparent); --on-brand:#fff;--ok:var(--success,#1f9d63);--warn:var(--warning,#d9931f);--bad:var(--danger,#dd4b52); --ease:cubic-bezier(.22,1,.36,1); --shadow:0 1px 2px rgba(14,19,22,.04),0 10px 28px rgba(14,19,22,.06); } /* ===== scoped reset — only inside the calendar container, NOT the modal chrome / close button ===== */ #recruitmentCalendarModal .rc-nx,#recruitmentCalendarModal .rc-nx *, #recruitmentCalendarModal .rc-nx *::before,#recruitmentCalendarModal .rc-nx *::after{ box-sizing:border-box;margin:0;padding:0;border:0;outline:0;background:transparent;box-shadow:none; text-shadow:none;border-radius:0;font-family:"Heebo","Inter",system-ui,sans-serif;font-weight:400; font-style:normal;line-height:1.4;letter-spacing:normal;color:inherit;text-decoration:none; list-style:none;-webkit-font-smoothing:antialiased} #recruitmentCalendarModal .rc-nx{display:flex;flex-direction:column;min-height:0;flex:1;color:var(--rtext); background:var(--bg,#FAFBFC)} #recruitmentCalendarModal .rc-nx :where(button,a,input,select){font-family:inherit} #recruitmentCalendarModal .rc-nx button{cursor:pointer} #recruitmentCalendarModal .rc-nx svg{display:block} /* ===== toolbar (NEXORA bar2) ===== */ #recruitmentCalendarModal .rc-nx .bar2{display:flex;align-items:center;gap:10px;flex-wrap:wrap; padding:12px 4px 14px;flex:none} #recruitmentCalendarModal .rc-nx .segm{display:inline-flex;background:var(--raised);border:1px solid var(--line); border-radius:11px;padding:3px} #recruitmentCalendarModal .rc-nx .segm button{padding:8px 13px;border-radius:8px;font-size:.82rem;font-weight:600; color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.15s; background:none} #recruitmentCalendarModal .rc-nx .segm button svg{width:15px;height:15px} #recruitmentCalendarModal .rc-nx .segm button.on, #recruitmentCalendarModal .rc-nx .segm .rc-view-tab.active{background:var(--surface);color:var(--brand);box-shadow:var(--shadow)} #recruitmentCalendarModal .rc-nx .navm{display:inline-flex;align-items:center;gap:6px} #recruitmentCalendarModal .rc-nx .navm b{font-size:1rem;font-weight:700;min-width:150px;text-align:center} #recruitmentCalendarModal .rc-nx .navm button{width:32px;height:32px;border-radius:9px;border:1px solid var(--line); background:var(--surface);color:var(--muted);display:grid;place-items:center} #recruitmentCalendarModal .rc-nx .navm button svg{width:15px;height:15px} #recruitmentCalendarModal .rc-nx .navm .today{width:auto;padding:0 12px;font-size:.8rem;font-weight:700} #recruitmentCalendarModal .rc-nx .btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px; border-radius:11px;font-weight:700;font-size:.86rem;background:var(--surface);border:1px solid var(--line); box-shadow:var(--shadow);color:var(--rtext);transition:transform .18s var(--ease)} #recruitmentCalendarModal .rc-nx .btn:hover{transform:translateY(-1px)} #recruitmentCalendarModal .rc-nx .btn svg{width:16px;height:16px} #recruitmentCalendarModal .rc-nx .btn.pri{background:linear-gradient(135deg,var(--accent),var(--brand)); color:var(--on-brand);border-color:transparent} #recruitmentCalendarModal .rc-nx .fil{display:inline-flex;align-items:center;gap:5px;background:var(--surface); border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);border-radius:10px;padding:8px 12px; font-size:.8rem;font-weight:600;color:var(--muted)} #recruitmentCalendarModal .rc-nx .fil:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)} #recruitmentCalendarModal .rc-nx .fil svg{width:13px;height:13px} #recruitmentCalendarModal .rc-nx .nxt-sel{appearance:none;-webkit-appearance:none;-moz-appearance:none; background-color:transparent;border:none;outline:none;color:var(--rtext);font:inherit;font-size:.8rem; font-weight:600;cursor:pointer;line-height:1.2;padding:0 16px 0 2px; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23009391'%20stroke-width='2.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-size:11px 11px;background-position:right center} #recruitmentCalendarModal[dir="rtl"] .rc-nx .nxt-sel,[dir="rtl"] #recruitmentCalendarModal .rc-nx .nxt-sel{ padding:0 2px 0 16px;background-position:left center} #recruitmentCalendarModal .rc-nx .nxt-sel option{color:var(--rtext);background:var(--surface);font-weight:600} /* today load indicator (reuses existing #rcLoadFill/#rcLoadCount ids) */ #recruitmentCalendarModal .rc-nx .rc-load{display:inline-flex;align-items:center;gap:8px;margin-inline-start:auto; font-size:.76rem;font-weight:600;color:var(--muted)} #recruitmentCalendarModal .rc-nx .rc-load .bar{width:70px;height:7px;border-radius:5px; background:color-mix(in srgb,var(--muted) 16%,transparent);overflow:hidden} #recruitmentCalendarModal .rc-nx .rc-load .fill{height:100%;border-radius:5px;transition:width .4s var(--ease); background:var(--ok)} #recruitmentCalendarModal .rc-nx .rc-load .fill.medium{background:var(--warn)} #recruitmentCalendarModal .rc-nx .rc-load .fill.high{background:var(--bad)} /* ===== calendar body ===== */ #recruitmentCalendarModal .rc-nx .rc-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden} /* ---- month ---- */ #recruitmentCalendarModal .rc-nx .cal{background:var(--surface);border:1px solid var(--grid);border-radius:16px; box-shadow:var(--shadow);overflow:hidden} #recruitmentCalendarModal .rc-nx .cal .dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--raised); border-bottom:1px solid var(--grid)} #recruitmentCalendarModal .rc-nx .cal .dow span{padding:10px 6px;text-align:center;font-size:.74rem;font-weight:600; color:var(--muted);border-inline-start:1px solid var(--grid)} #recruitmentCalendarModal .rc-nx .cal .dow span:first-child{border-inline-start:none} #recruitmentCalendarModal .rc-nx .cal .grid{display:grid;grid-template-columns:repeat(7,1fr)} #recruitmentCalendarModal .rc-nx .cal .grid .cell{min-height:104px;border-inline-start:1px solid var(--grid); border-bottom:1px solid var(--grid);padding:7px;display:flex;flex-direction:column;gap:4px;position:relative; background:var(--surface);overflow:hidden;cursor:pointer;transition:background .15s} #recruitmentCalendarModal .rc-nx .cal .grid .cell:nth-child(7n){border-inline-start:none} #recruitmentCalendarModal .rc-nx .cal .grid .cell:nth-last-child(-n+7){border-bottom:none} #recruitmentCalendarModal .rc-nx .cal .grid .cell:hover{background:color-mix(in srgb,var(--brand) 4%,var(--surface))} #recruitmentCalendarModal .rc-nx .cal .grid .cell.out{background:color-mix(in srgb,var(--brand) 3%,var(--surface))} #recruitmentCalendarModal .rc-nx .cal .grid .cell.today{background:color-mix(in srgb,var(--brand) 6%,var(--surface))} #recruitmentCalendarModal .rc-nx .cal .grid .cell .dn{font-size:.8rem;font-weight:600;color:var(--muted); align-self:flex-end} #recruitmentCalendarModal .rc-nx .cal .grid .cell.out .dn{opacity:.45} #recruitmentCalendarModal .rc-nx .cal .grid .cell.today .dn{background:var(--brand);color:#fff;width:24px;height:24px; border-radius:50%;display:grid;place-items:center} #recruitmentCalendarModal .rc-nx .more{font-size:.68rem;color:var(--brand);font-weight:700;cursor:pointer;padding:1px 6px} /* ---- week / day time grid ---- */ #recruitmentCalendarModal .rc-nx .weekwrap{overflow:visible} #recruitmentCalendarModal .rc-nx .week{min-width:0;display:grid;grid-template-columns:56px repeat(7,minmax(0,1fr)); background:var(--surface);border:1px solid var(--grid);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)} #recruitmentCalendarModal .rc-nx .week.day{grid-template-columns:72px 1fr} #recruitmentCalendarModal .rc-nx .slot{min-height:52px;padding:5px;border-bottom:1px solid var(--grid); border-inline-start:1px solid var(--grid);font-size:11px;color:var(--muted);display:flex;flex-direction:column; gap:3px;min-width:0;cursor:pointer} #recruitmentCalendarModal .rc-nx .slot.tlab{align-items:flex-end;justify-content:flex-start; font-variant-numeric:tabular-nums;color:var(--muted);background:var(--surface);cursor:default; border-inline-start:none} #recruitmentCalendarModal .rc-nx .slot.head{position:sticky;top:0;background:var(--raised);font-weight:700;z-index:3; text-align:center;line-height:1.25;color:var(--rtext);align-items:center;justify-content:center;cursor:pointer} #recruitmentCalendarModal .rc-nx .slot.head.tlab{cursor:default} #recruitmentCalendarModal .rc-nx .slot.head .hd-date{font-weight:600;font-size:.7rem;color:var(--muted)} #recruitmentCalendarModal .rc-nx .slot.head.today{color:var(--brand)} #recruitmentCalendarModal .rc-nx .slot.head.today .hd-date{color:var(--brand)} #recruitmentCalendarModal .rc-nx .slot.head .hd-cnt{display:inline-block;margin-top:3px; background:color-mix(in srgb,var(--brand) 14%,transparent);color:var(--brand);font-size:.62rem;font-weight:800; border-radius:20px;padding:0 6px;min-width:16px;line-height:1.4} #recruitmentCalendarModal .rc-nx .slot.today{background:color-mix(in srgb,var(--brand) 4%,transparent)} #recruitmentCalendarModal .rc-nx .slot:hover{background:color-mix(in srgb,var(--brand) 5%,transparent)} #recruitmentCalendarModal .rc-nx .slot.tlab:hover,#recruitmentCalendarModal .rc-nx .slot.head:hover{background:var(--raised)} #recruitmentCalendarModal .rc-nx .week .slot .chip{white-space:normal;font-size:10px} #recruitmentCalendarModal .rc-nx .rc-now{position:relative;height:0} #recruitmentCalendarModal .rc-nx .rc-now::before{content:"";position:absolute;inset-inline:0;height:2px; background:var(--bad);box-shadow:0 0 0 2px color-mix(in srgb,var(--bad) 25%,transparent)} /* ---- event chip (color via --c set by type class) ---- */ #recruitmentCalendarModal .rc-nx .chip{display:flex;align-items:center;gap:5px;padding:3px 7px;border-radius:7px; font-size:.72rem;font-weight:600;background:color-mix(in srgb,var(--c) 12%,transparent); color:color-mix(in srgb,var(--c) 78%,var(--rtext));cursor:pointer;overflow:hidden;white-space:nowrap; text-overflow:ellipsis;transition:transform .14s var(--ease),filter .14s;--c:var(--brand)} #recruitmentCalendarModal .rc-nx .chip:hover{transform:translateY(-1px);filter:brightness(.97)} #recruitmentCalendarModal .rc-nx .chip.dragging{opacity:.5} #recruitmentCalendarModal .rc-nx .chip .dot{width:6px;height:6px;border-radius:50%;background:var(--c);flex:none} #recruitmentCalendarModal .rc-nx .chip .tm{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.68rem;flex:none} #recruitmentCalendarModal .rc-nx .chip .chip-tt{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0} #recruitmentCalendarModal .rc-nx .chip .chip-ic{flex:none;display:inline-flex} #recruitmentCalendarModal .rc-nx .chip .chip-ic svg{width:12px;height:12px} /* type → brand token (no hardcoded hex: all alias the system palette) */ #recruitmentCalendarModal .rc-nx .chip.rc-event-phone{--c:var(--brand)} #recruitmentCalendarModal .rc-nx .chip.rc-event-inperson{--c:var(--accent)} #recruitmentCalendarModal .rc-nx .chip.rc-event-trial{--c:var(--warn)} #recruitmentCalendarModal .rc-nx .chip.rc-event-onboarding{--c:var(--ok)} #recruitmentCalendarModal .rc-nx .chip.rc-event-followup{--c:color-mix(in srgb,var(--brand) 55%,var(--accent))} #recruitmentCalendarModal .rc-nx .chip.rc-event-general{--c:var(--muted)} /* ===== detail dialog restyle (reuses #rcEventDetailModal; tasks .tdet look) ===== */ #rcEventDetailModal .rc-det-h{display:flex;align-items:flex-start;gap:14px;padding:20px 22px;color:#fff; background:linear-gradient(120deg,var(--c,var(--brand)),color-mix(in srgb,var(--c,var(--brand)) 66%,#000))} #rcEventDetailModal .rc-det-h .pic{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.22); display:grid;place-items:center;flex:none;color:#fff} #rcEventDetailModal .rc-det-h .pic svg{width:22px;height:22px} #rcEventDetailModal .rc-det-h h3{margin:0;font-size:1.16rem;line-height:1.3;color:#fff;font-weight:700} #rcEventDetailModal .rc-det-h .st{margin-top:7px;display:inline-flex;align-items:center;gap:6px;font-size:.73rem; font-weight:700;background:rgba(255,255,255,.22);padding:3px 11px;border-radius:30px;color:#fff} #rcEventDetailModal .rc-det-top{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px 0} #rcEventDetailModal .rc-det-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700; border-radius:30px;padding:5px 13px;background:color-mix(in srgb,var(--c,var(--brand)) 14%,transparent); color:color-mix(in srgb,var(--c,var(--brand)) 80%,var(--rtext));--c:var(--brand)} #rcEventDetailModal .rc-det-badge svg{width:14px;height:14px} #rcEventDetailModal .rc-det-b{padding:12px 22px 4px} #rcEventDetailModal .rc-det-b .trow{display:flex;align-items:center;gap:12px;padding:11px 0; border-bottom:1px solid var(--line);font-size:.88rem} #rcEventDetailModal .rc-det-b .trow:last-of-type{border-bottom:none} #rcEventDetailModal .rc-det-b .trow .k{color:var(--muted);width:108px;display:flex;align-items:center;gap:7px;flex:none} #rcEventDetailModal .rc-det-b .trow .v{font-weight:600;display:flex;align-items:center;gap:7px;color:var(--rtext)} #rcEventDetailModal .rc-det-note{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--raised); font-size:.86rem;color:var(--rtext);line-height:1.5} #rcEventDetailModal .rc-det-link{margin-top:12px;display:flex;align-items:center;gap:8px;padding:12px 14px; border-radius:12px;background:color-mix(in srgb,var(--brand) 9%,transparent); border:1px solid color-mix(in srgb,var(--brand) 24%,transparent); color:color-mix(in srgb,var(--brand) 82%,var(--rtext));font-size:.86rem;font-weight:600} #rcEventDetailModal .rc-det-summary{margin-top:14px} #rcEventDetailModal .rc-det-summary h5{margin:0 0 8px;font-size:.84rem;font-weight:800;color:var(--rtext)} #rcEventDetailModal .rc-det-summary textarea{width:100%;min-height:72px;padding:10px 13px;border-radius:12px; border:1px solid var(--line);background:var(--surface);color:var(--rtext);font:inherit;font-size:.88rem;resize:vertical} #rcEventDetailModal .rc-det-summary textarea:focus{border-color:var(--brand);outline:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)} /* ===== create / edit form restyle (#rcEventModal) — NEXORA field language, scoped ===== Overrides ONLY inside #rcEventModal; the global .modal/.form-* classes are untouched elsewhere. Covers both the static fields and the dynamic candidate fields (same .form-group/.form-input markup). */ #rcEventModal .modal-box{border:1px solid var(--line);border-radius:18px; box-shadow:0 30px 90px rgba(14,19,22,.3)} #rcEventModal .modal-header{padding:20px 24px;border-bottom:1px solid var(--line); background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 8%,var(--surface)),var(--surface))} #rcEventModal .modal-title{font-size:1.18rem;font-weight:700;color:var(--rtext);gap:9px} #rcEventModal .modal-close{width:34px;height:34px;border-radius:9px;background:var(--raised); border:1px solid var(--line);color:var(--muted);font-size:1.3rem;transition:.15s} #rcEventModal .modal-close:hover{background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)} #rcEventModal .modal-body{padding:22px 24px;background:var(--surface)} #rcEventModal .form-group{margin-bottom:16px} #rcEventModal .form-label{display:flex;align-items:center;gap:6px;margin-bottom:7px;font-size:.82rem; font-weight:600;color:var(--muted)} #rcEventModal .form-input,#rcEventModal .form-select,#rcEventModal .form-textarea, #rcEventModal select.form-input,#rcEventModal textarea.form-input{width:100%;min-height:44px;padding:10px 13px; border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--rtext);font:inherit; font-size:.9rem;transition:border-color .15s,box-shadow .15s} #rcEventModal textarea.form-input,#rcEventModal .form-textarea{min-height:76px;resize:vertical;line-height:1.5} #rcEventModal .form-input:focus,#rcEventModal .form-select:focus,#rcEventModal .form-textarea:focus, #rcEventModal select.form-input:focus,#rcEventModal textarea.form-input:focus{outline:none; border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)} #rcEventModal .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} #rcEventModal #rcCandidateSection h5{margin:0 0 12px;font-size:.92rem;font-weight:800;color:var(--brand)} #rcEventModal .modal-footer{padding:16px 24px;border-top:1px solid var(--line);background:var(--raised); display:flex;justify-content:flex-end;gap:10px} #rcEventModal .modal-footer .btn{padding:10px 18px;border-radius:11px;font-weight:700;font-size:.86rem; border:1px solid transparent;transition:transform .16s var(--ease),filter .16s} #rcEventModal .modal-footer .btn:hover{transform:translateY(-1px)} #rcEventModal .modal-footer .btn-secondary{background:var(--surface);border-color:var(--line);color:var(--rtext)} #rcEventModal .modal-footer .btn-primary{background:linear-gradient(135deg,var(--accent),var(--brand));color:#fff} #rcEventModal .modal-footer .btn-danger{background:var(--bad);color:#fff} @media(max-width:600px){#rcEventModal .form-row{grid-template-columns:1fr}} /* ===== selection chips (type / duration / reminder) — drive the hidden