/* New-flow preview components (prefixed nf- to avoid collisions) */
.nf-badge{display:inline-block;border-radius:6px;padding:2.5px 9px;font-size:11.5px;font-weight:700;white-space:nowrap}
.nf-b-new{background:#e3ecfb;color:#1a4fa0}.nf-b-ok{background:#e2f2e4;color:#2e7d32}
.nf-b-warn{background:#fbe9dc;color:#c46a1b}.nf-b-muted{background:#eef1f6;color:#5b6677}
.nf-b-teal{background:#dff2ef;color:#0e6f63}
.nf-btn{border:none;border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;cursor:pointer}
.nf-btn:hover{opacity:.88}
.nf-btn-p{background:#0D2A5C;color:#fff}.nf-btn-t{background:#1B9E8F;color:#fff}
.nf-btn-o{background:#fff;color:#0D2A5C;border:1px solid #e4e8ef}
.nf-btn-warn{background:#c46a1b;color:#fff}.nf-btn-ghost{background:none;color:#1B9E8F;padding:4px 6px;border:none;cursor:pointer;font-weight:700;font-size:12px}
.nf-btn-sm{padding:5px 10px;font-size:12px}
.nf-btnrow{display:flex;gap:7px;flex-wrap:wrap}
.nf-card{background:#fff;border:1px solid #e4e8ef;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 4px rgba(13,42,92,.05);overflow:hidden}
.nf-card-h{padding:13px 18px;border-bottom:1px solid #e4e8ef;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.nf-card-h h3{margin:0;font-size:15px;color:#0D2A5C}
.nf-card-h .nf-hint{color:#8a93a3;font-size:12.5px;margin-left:auto}
.nf-card-b{padding:16px 18px}
.nf-table{border-collapse:collapse;width:100%}
.nf-table th,.nf-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #e4e8ef;vertical-align:middle;font-size:13.5px}
.nf-table th{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:#8a93a3;font-weight:700}
.nf-table tr:hover td{background:#fafbfe}
.nf-avatar{width:32px;height:32px;border-radius:50%;background:#0D2A5C;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-right:9px;flex-shrink:0}
.nf-who{display:flex;align-items:center}
.nf-who .n{font-weight:600}.nf-who .e{font-size:12px;color:#8a93a3}
.nf-progress{background:#eef1f6;border-radius:10px;height:9px;width:130px;overflow:hidden;display:inline-block;vertical-align:middle}
.nf-progress i{display:block;height:100%;background:#1B9E8F;border-radius:10px}
.nf-sess{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid #e4e8ef;border-radius:10px;margin:8px 0;background:#fff}
.nf-sess .t{font-weight:600}.nf-sess .o{font-size:12px;color:#8a93a3}
.nf-sess .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.nf-stage{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed #e4e8ef}
.nf-stage:last-child{border:none}
.nf-dot{width:14px;height:14px;border-radius:50%;margin-top:4px;flex-shrink:0}
.nf-dot.done{background:#2e7d32}.nf-dot.now{background:#c46a1b;box-shadow:0 0 0 4px #fbe9dc}.nf-dot.next{background:#e4e8ef}
.nf-note{border-left:4px solid #1B9E8F;background:#eef7f6;padding:10px 15px;border-radius:0 8px 8px 0;font-size:13px;margin:12px 0;color:#0e5a51}
.nf-modal-bg{position:fixed;inset:0;background:rgba(13,42,92,.45);display:none;align-items:center;justify-content:center;z-index:500}
.nf-modal-bg.open{display:flex}
.nf-modal{background:#fff;border-radius:14px;max-width:560px;width:92%;max-height:86vh;overflow:auto;padding:22px 24px;box-shadow:0 18px 60px rgba(0,0,0,.25)}
.nf-modal h3{margin:0 0 4px;color:#0D2A5C}.nf-modal .sub{color:#8a93a3;font-size:13px;margin-bottom:14px}
.nf-tpl{border:1.5px solid #e4e8ef;border-radius:11px;padding:13px 15px;margin:9px 0;cursor:pointer}
.nf-tpl:hover{border-color:#1B9E8F}.nf-tpl.sel{border-color:#1B9E8F;background:#f2faf9}
.nf-tpl .tn{font-weight:700;color:#0D2A5C}.nf-tpl .td{font-size:12.5px;color:#5b6677}
.nf-crumb{font-size:13px;color:#8a93a3;margin-bottom:12px}
.nf-crumb a{color:#1B9E8F;cursor:pointer;text-decoration:none;font-weight:600}
.nf-kv{display:grid;grid-template-columns:150px 1fr;gap:4px 14px;font-size:13.5px;margin:8px 0}
.nf-kv b{color:#5b6677;font-weight:600}
.nf-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:900px){.nf-two{grid-template-columns:1fr}}
.nf-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0D2A5C;color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;box-shadow:0 8px 30px rgba(0,0,0,.3);opacity:0;transition:opacity .25s;pointer-events:none;z-index:999}
.nf-toast.show{opacity:1}

/* new-flow board + form additions */
.nf-input{width:100%;padding:8px 10px;border:1px solid #d9dfe8;border-radius:8px;font-size:13.5px;font-family:inherit;margin-top:3px;background:#fff}
.nf-input:focus{outline:none;border-color:#1B9E8F;box-shadow:0 0 0 3px rgba(27,158,143,.12)}
.nf-board{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
@media(max-width:1000px){.nf-board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.nf-board{grid-template-columns:1fr}}
.nf-lane{transition:background .12s,box-shadow .12s;border-radius:12px}
.nf-lane--over{background:#eef7f6;box-shadow:inset 0 0 0 2px #1B9E8F}
.nf-card{cursor:grab}.nf-card:active{cursor:grabbing}

/* confirm popup */
.nf-confirm-bg{position:fixed;inset:0;background:rgba(13,42,92,.45);display:none;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(1px)}
.nf-confirm-bg.open{display:flex}
.nf-confirm{background:#fff;border-radius:14px;max-width:420px;width:90%;padding:24px;box-shadow:0 18px 60px rgba(0,0,0,.28);animation:nfpop .16s ease-out}
@keyframes nfpop{from{transform:scale(.95);opacity:.4}to{transform:scale(1);opacity:1}}
.nf-confirm h3{margin:0 0 8px;color:#0D2A5C;font-size:17px}
.nf-confirm p{margin:0 0 18px;color:#5b6677;font-size:14px;line-height:1.5}
.nf-confirm__row{display:flex;gap:10px;justify-content:flex-end}

/* board: keep native onb styling, just widen lanes to 4 + drag affordance */
.onb-pipeline.nf-board{grid-template-columns:repeat(4,1fr)}
@media(max-width:1050px){.onb-pipeline.nf-board{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.onb-pipeline.nf-board{grid-template-columns:1fr}}
.nf-lane{transition:background .12s,box-shadow .12s}
.nf-lane--over{background:#eaf5f3 !important;box-shadow:inset 0 0 0 2px #1B9E8F}
.nf-card{cursor:grab}.nf-card:active{cursor:grabbing}

/* employee: up-next hero + timeline */
.nf-next{border:1px solid #cfe8e3;background:linear-gradient(90deg,#f2faf9,#ffffff)}
.nf-next__icon{width:40px;height:40px;border-radius:50%;background:#1B9E8F;color:#fff;display:grid;place-items:center;font-size:14px;flex-shrink:0}
.nf-timeline{position:relative;padding-left:6px}
.nf-tl-item{display:flex;gap:14px;padding:12px 0;position:relative}
.nf-tl-item:not(:last-child)::after{content:"";position:absolute;left:6px;top:22px;bottom:-2px;width:2px;background:#e4e8ef}
.nf-tl-dot{width:14px;height:14px;border-radius:50%;background:#cbd2dd;margin-top:3px;flex-shrink:0;z-index:1;box-shadow:0 0 0 3px #fff}
.nf-tl-item--complete .nf-tl-dot{background:#2e7d32}
.nf-tl-item--awaiting .nf-tl-dot{background:#c46a1b;box-shadow:0 0 0 3px #fbe9dc}
.nf-tl-body{flex:1}
.nf-tl-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.nf-tl-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.nf-tl-meta span{white-space:nowrap}

/* probation kanban: 4 milestone columns, same polished style as onboarding */
.onb-pipeline.nf-prboard{grid-template-columns:repeat(4,1fr)}
@media(max-width:1050px){.onb-pipeline.nf-prboard{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.onb-pipeline.nf-prboard{grid-template-columns:1fr}}
.nf-prlane{transition:background .12s,box-shadow .12s}
.nf-prcard{cursor:grab}.nf-prcard:active{cursor:grabbing}

/* probation card extras */
.prob-card__monthly{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.prob-card__decide{display:flex;gap:6px;padding-top:9px;margin-top:9px;border-top:1px solid var(--ink-100,#eef1f7)}
.prob-card__decide .btn{flex:1;justify-content:center}

/* ── modern KPI strip ── */
.nf-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:1000px){.nf-kpis{grid-template-columns:repeat(2,1fr)}}
.nf-kpi{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #eef1f7;border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(15,26,46,.03)}
.nf-kpi__icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.nf-kpi__icon--info{background:#eef4fc;color:#204D9B}
.nf-kpi__icon--warn{background:#fdf4e7;color:#C77A00}
.nf-kpi__icon--danger{background:#fbecec;color:#C8333A}
.nf-kpi__icon--ok{background:#eaf5ee;color:#1F8A4C}
.nf-kpi__icon--muted{background:#eff2f7;color:#5b6781}
.nf-kpi__v{font-size:22px;font-weight:700;color:#0F1A2E;letter-spacing:-.5px;line-height:1}
.nf-kpi__l{font-size:11.5px;color:#5b6781;margin-top:3px}

/* ── filter bar ── */
.nf-filterbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.nf-tabs{display:inline-flex;background:#fff;border:1px solid #eef1f7;border-radius:10px;padding:3px;gap:2px}
.nf-tab{background:transparent;border:0;padding:6px 13px;font-size:12.5px;font-weight:600;color:#5b6781;cursor:pointer;border-radius:7px;font-family:inherit;transition:all .14s}
.nf-tab:hover{color:#0F1A2E}
.nf-tab--on{background:#eef4fc;color:#204D9B}
.nf-filters{margin-left:auto;display:flex;gap:8px}
.nf-select{height:34px;border:1px solid #e4e8ef;border-radius:8px;padding:0 30px 0 11px;font-size:12.5px;color:#2F3B52;background:#fff;cursor:pointer;font-family:inherit;
  appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6781' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center}
.nf-select:focus{outline:none;border-color:#189CD9;box-shadow:0 0 0 3px rgba(24,156,217,.12)}

/* ── subtle board scheme: softer columns + refined cards ── */
.onb-pipeline.nf-board,.onb-pipeline.nf-prboard{gap:14px}
.nf-board .onb-column,.nf-prboard .onb-column{background:#f7f9fc;border:1px solid #eef1f7;border-radius:14px}
.nf-board .onb-card,.nf-prboard .onb-card{border-radius:12px;border-color:#eef1f7;box-shadow:0 1px 2px rgba(15,26,46,.03)}
.nf-board .onb-card:hover,.nf-prboard .onb-card:hover{border-color:#BCD7F2;box-shadow:0 6px 16px rgba(32,77,155,.08)}
.nf-lane--over,.nf-prlane.nf-lane--over{background:#eef4fc !important;box-shadow:inset 0 0 0 2px #189CD9;border-radius:14px}

/* ── collapsible panel ── */
.nf-collapse__head{cursor:pointer;user-select:none}
.nf-collapse__head:hover{background:#fafbfe}
.nf-collapse__chev{color:#8591a8;font-size:12px;transition:transform .14s}

/* ── Lifecycle Records: filter bar + pager ── */
.nf-recbar{background:#fff;border:1px solid #eef1f7;border-radius:14px;padding:14px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.nf-recbar__search .nf-input{width:100%}
.nf-recbar__filters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:1100px){.nf-recbar__filters{grid-template-columns:repeat(2,1fr)}}
.nf-recbar__filters .nf-select{width:100%}
.nf-recbar__dates{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.nf-daterange{display:flex;flex-direction:column;gap:3px;font-size:11px;color:#8591a8;font-weight:600}
.nf-daterange .nf-input{height:34px}
.nf-pager{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid #eef1f7;flex-wrap:wrap;gap:10px}
.nf-pager__btns{display:flex;align-items:center;gap:10px}
.nf-pager__now{font-size:12.5px;color:#5b6781;font-weight:600}
.nf-recbar__filters .nf-select,.nf-recbar__search .nf-input{height:36px}

/* ── centered popup windows (replaces the right tray) ── */
.nf-modal--window{max-width:640px;width:94%;max-height:88vh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.nf-modal__head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #eef1f7;flex-shrink:0}
.nf-modal__head h3{margin:0;font-size:16px;color:#204D9B;font-weight:700}
.nf-modal__x{width:32px;height:32px;border-radius:8px;border:1px solid #e4e8ef;background:#fff;color:#5b6781;cursor:pointer;font-size:13px}
.nf-modal__x:hover{color:#0F1A2E;border-color:#b8c0cf}
.nf-modal__body{padding:18px 22px 24px;overflow-y:auto}

/* ── employee lifecycle search on probation tab ── */
.nf-empsearch{position:relative;margin-bottom:14px}
.nf-empsearch__box{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #e4e8ef;border-radius:12px;padding:0 14px;height:46px;box-shadow:0 1px 3px rgba(15,26,46,.04)}
.nf-empsearch__box:focus-within{border-color:#189CD9;box-shadow:0 0 0 4px rgba(24,156,217,.1)}
.nf-empsearch__icon{font-size:15px;opacity:.6}
.nf-empsearch__box .nf-input{border:none;box-shadow:none;height:44px;flex:1;margin:0;font-size:13.5px}
.nf-empsearch__box .nf-input:focus{border:none;box-shadow:none}
.nf-empsearch__results{position:absolute;top:50px;left:0;right:0;background:#fff;border:1px solid #e4e8ef;border-radius:12px;box-shadow:0 16px 40px rgba(15,26,46,.14);z-index:60;overflow:hidden}
.nf-empsearch__hit{display:flex;align-items:center;gap:11px;padding:11px 15px;cursor:pointer;border-bottom:1px solid #f2f4f9}
.nf-empsearch__hit:last-child{border-bottom:none}
.nf-empsearch__hit:hover{background:#f7fafd}

@media print{.nf-empsearch,.page-actions,.nf-filterbar{display:none}}

/* feedback alerts */
.nf-alert{border-radius:10px;padding:10px 14px;font-size:13px;line-height:1.5}
.nf-alert--danger{background:#fbecec;border:1px solid #f3c9cc;color:#C8333A}
.nf-card-alert{font-size:11px;font-weight:700;color:#C8333A;background:#fbecec;border-radius:6px;padding:3px 8px;margin:6px 0 2px;display:inline-block}
.nf-card-next{font-size:11px;color:#5b6781;margin:6px 0 2px}

/* small select for bg check rows */
.nf-select--sm{height:30px;font-size:12px;padding:0 26px 0 9px}
.nf-completed-card:hover{border-color:#BCD7F2;box-shadow:0 4px 14px rgba(32,77,155,.08)}
.nf-sign-block img{display:block}

/* modern PM→TL→HR progress tracker (Project Ratings) */
.nf-track{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:4px 0}
.nf-track__step{display:flex;align-items:center;gap:9px}
.nf-track__dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:#eef1f7;color:#8591a8;flex-shrink:0}
.nf-track__step--done .nf-track__dot{background:#1F8A4C;color:#fff}
.nf-track__step--current .nf-track__dot{background:#189CD9;color:#fff;box-shadow:0 0 0 4px rgba(24,156,217,.18)}
.nf-track__role{font-size:11px;color:#5b6781;font-weight:600}
.nf-track__val{font-size:13px;color:#0F1A2E;font-weight:700}
.nf-track__bar{height:2px;width:34px;background:#e4e8ef;margin:0 8px}
.nf-track__bar--on{background:#1F8A4C}

.nf-alert--warn{background:#fdf4e3;border:1px solid #f0d9a8;color:#8a5a00}
.nf-alert--info{background:#E5F0FB;border:1px solid #bcd7f2;color:#204D9B}

/* TL KPI compact view — shrink cards, hide long descriptions */
.nf-kpi-compact .tabpane > *{padding:10px 14px !important;margin-bottom:8px !important}
.nf-kpi-compact .tabpane p, .nf-kpi-compact .tabpane .kpi-desc, .nf-kpi-compact .tabpane .table__sub:nth-of-type(n+2){display:none}
/* TL KPI Reviews compact mode: keep card head+actions, hide the bulky middle */
.nf-kpi-compact .kpi-card > *:not(.kpi-card__head):not(.kpi-card__actions){display:none}
.nf-kpi-compact .kpi-card{padding-bottom:10px}

/* collapsible sidebar groups */
.nf-navgroup__head{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:none;color:#8fa3c8;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:10px 18px 4px;cursor:pointer}
.nf-navgroup__head:hover{color:#fff}
.nf-navgroup__items--closed{display:none}

.nf-team{border:1px solid #eef1f7;border-radius:8px;margin-bottom:8px;padding:0}
.nf-team summary{cursor:pointer;padding:10px 14px;list-style:none;display:flex;gap:8px;align-items:center}
.nf-team summary::before{content:"▸";color:#8fa3c8;font-size:11px;transition:transform .15s}
.nf-team[open] summary::before{transform:rotate(90deg)}
.nf-team .table{margin:0}

#nfProjCharts .nf-slice{cursor:pointer;transition:transform .15s ease;transform-origin:60px 60px}
#nfProjCharts .nf-slice:hover{transform:scale(1.06)}

.assignment-state{cursor:pointer;transition:transform .16s cubic-bezier(.2,.8,.2,1);display:inline-block;will-change:transform}
.assignment-state:hover{transform:scale(1.12)}