/* =====================================================================
   nds_work.css — কাজের খাতা (Work Hub) — প্রিমিয়াম নীল ডিজাইন সিস্টেম
   ---------------------------------------------------------------------
   সব ক্লাস `nw-` prefix। অ্যাপের ম্যাজেন্টা থিম বা .btn/.card override করে না।
   compact · clean · premium · minimal padding · এক সারিতে নিখুঁত align ·
   সব shadow নীল · gradient বোতাম/ট্যাব · light/dark সঠিক রঙ।
   ===================================================================== */
:root{
  --nw-blue:#2563eb; --nw-blue2:#3b82f6; --nw-blue-d:#1e3a8a;
  --nw-grad:linear-gradient(135deg,#2563eb,#3b82f6);
  --nw-grad-d:linear-gradient(135deg,#0f172a,#1e3a8a);
  --nw-ok:#0e9f6e; --nw-ok-grad:linear-gradient(135deg,#0e9f6e,#16c088);
  --nw-warn:#d97706; --nw-warn-grad:linear-gradient(135deg,#d97706,#f59e0b);
  --nw-red:#dc2626; --nw-red-grad:linear-gradient(135deg,#dc2626,#f04444);
  --nw-page:#f2f6fd; --nw-card:#fff; --nw-line:#e3ebf7;
  --nw-ink:#0f172a; --nw-mut:#64748b; --nw-mut2:#94a3b8;
  --nw-sh:0 2px 10px rgba(37,99,235,.12);
  --nw-sh2:0 6px 20px rgba(37,99,235,.22);
  --nw-fld-bg:#fff; --nw-fld-ink:#0f172a; --nw-fld-line:#cbd7ea;
  --nw-r:8px; --nw-r-sm:5px; --nw-ctl:38px;
}
/* ⚠️ এখানে আগে `@media (prefers-color-scheme:dark){:root{…}}` ছিল — কোনো গার্ড ছাড়াই।
   ফলে ফোন dark থাকলেই কাজের খাতা/নোট কালো হয়ে যেত, যদিও অ্যাপে dark theme নেই
   (app.js THEMES = magenta/blue/teal/green/indigo)। ডিভাইস-থিম আর ধরা হয় না;
   নিচের data-theme="dark" রুলটাই একমাত্র পথ। */
:root[data-theme="dark"]{
  --nw-page:#0b1220; --nw-card:#111a2b; --nw-line:#1f2d45;
  --nw-ink:#e8eefb; --nw-mut:#93a4c2; --nw-mut2:#5b6c8a;
  --nw-fld-bg:#0d1626; --nw-fld-ink:#e8eefb; --nw-fld-line:#2a3a57;
  --nw-sh:0 2px 12px rgba(0,0,0,.45); --nw-sh2:0 8px 22px rgba(0,0,0,.55);
}
:root[data-theme="light"]{
  --nw-page:#f2f6fd; --nw-card:#fff; --nw-line:#e3ebf7;
  --nw-ink:#0f172a; --nw-mut:#64748b; --nw-fld-bg:#fff; --nw-fld-ink:#0f172a; --nw-fld-line:#cbd7ea;
}

.nw{color:var(--nw-ink);font:400 14px/1.5 inherit}
.nw *{box-sizing:border-box}
.nw h1,.nw h2,.nw h3,.nw h4,.nw p{margin:0}

/* ── টুলবার (স্ক্রিন হেডার) ─────────────────────────────── */
.nw-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.nw-bar .nw-search{flex:1 1 180px;min-width:120px}
.nw-title{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.nw-title i{width:34px;height:34px;display:grid;place-items:center;border-radius:var(--nw-r-sm);
  background:var(--nw-grad);color:#fff;font-size:15px;box-shadow:var(--nw-sh)}
.nw-title h2{font-size:17px;font-weight:800;letter-spacing:-.01em}
.nw-title small{color:var(--nw-mut);font-weight:600}

/* ── বোতাম (gradient · hover zoom · সবসময় হাইলাইটেড) ───── */
.nw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;
  height:var(--nw-ctl);padding:0 14px;border:0;border-radius:var(--nw-r-sm);cursor:pointer;
  font:700 13px/1 inherit;color:#fff;white-space:nowrap;text-decoration:none;
  background:var(--nw-grad);box-shadow:0 2px 8px rgba(37,99,235,.38);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.4),box-shadow .2s ease,filter .2s ease}
.nw-btn:hover{transform:scale(1.14) translateY(-1px);box-shadow:0 8px 20px rgba(37,99,235,.55);filter:brightness(1.08)}
.nw-btn:active{transform:scale(1.04)}
.nw-btn i{font-size:13px}
.nw-btn.sm{height:30px;padding:0 10px;font-size:12px;border-radius:4px}
.nw-btn.nw-day-add{transition:transform .2s ease,background .25s ease,box-shadow .25s ease}
.nw-btn.nw-day-add:hover{transform:scale(1.03);filter:none;
  background:linear-gradient(135deg,#5cc16e,#86e0a0);box-shadow:0 5px 16px rgba(76,175,80,.45)}
.nw-btn.nw-day-add:active{transform:scale(1.01)}
.nw-btn.ok{background:var(--nw-ok-grad);box-shadow:0 2px 8px rgba(14,159,110,.4)}
.nw-btn.ok:hover{box-shadow:0 8px 20px rgba(14,159,110,.55)}
.nw-btn.warn{background:var(--nw-warn-grad);box-shadow:0 2px 8px rgba(217,119,6,.4)}
.nw-btn.danger{background:var(--nw-red-grad);box-shadow:0 2px 8px rgba(220,38,38,.4)}
.nw-btn.danger:hover{box-shadow:0 8px 20px rgba(220,38,38,.55)}
.nw-btn.ghost{background:var(--nw-card);color:var(--nw-blue);box-shadow:inset 0 0 0 1.5px var(--nw-blue),var(--nw-sh)}
.nw-btn.ghost:hover{background:var(--nw-blue);color:#fff}
.nw-btn[disabled]{opacity:.5;pointer-events:none;filter:grayscale(.3)}
.nw-ico{width:30px;height:30px;padding:0;border-radius:4px;font-size:12px}

/* ── ফিল্ড (light bg · নীল shadow · এক উচ্চতা) ─────────── */
.nw-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.nw-f>label{font-size:11.5px;font-weight:700;color:var(--nw-mut);letter-spacing:.01em}
.nw-in,.nw-sel,.nw-ta{width:100%;box-sizing:border-box;height:var(--nw-ctl);padding:0 11px;
  border:1.5px solid var(--nw-fld-line);border-radius:var(--nw-r-sm);
  background:var(--nw-fld-bg)!important;color:var(--nw-fld-ink)!important;
  font:500 13.5px/1 inherit;transition:border-color .15s,box-shadow .15s;color-scheme:light}
.nw-ta{height:auto;min-height:64px;padding:9px 11px;line-height:1.5;resize:vertical}
.nw-in:focus,.nw-sel:focus,.nw-ta:focus{outline:0;border-color:var(--nw-blue);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.nw-in::placeholder,.nw-ta::placeholder{color:var(--nw-mut2)}
.nw-sel{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%236b7a95' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
.nw-row{display:flex;align-items:stretch;gap:8px}
.nw-row>*{min-width:0}
.nw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px 10px}
/* ঠিক ২ কলাম — ৪টা ঘর ২×২ হয়ে সারি পূরণ করে, auto-fit-এর ৩+১ অরফান হয় না */
.nw-grid2{grid-template-columns:repeat(2,1fr)}
.nw-chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--nw-ink);align-self:center}
.nw-chk input{width:16px;height:16px;accent-color:var(--nw-blue);margin:0}

/* ── কাজের পাতায় ক্লায়েন্ট চিপ (নাম + কল + WhatsApp) ─────
   ⚠️ .nw-jh__sub-এর বাকি ঘর ১২.৫px টেক্সট — এখানে বড় বোতাম দিলে সারির center
   line ভেঙে যেত। তাই উচ্চতা টেক্সটের সমান (২২px), padding সামান্য। */
.nw-cchip{display:inline-flex;align-items:center;gap:3px}
.nw-clink{display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;height:22px;
  padding:0 7px;border:0;border-radius:var(--nw-r-sm);cursor:pointer;
  font-weight:700;font-size:12.5px;line-height:1;font-family:inherit;
  color:var(--nw-blue);background:linear-gradient(135deg,#eaf1ff,#f7faff);
  box-shadow:inset 0 0 0 1.2px rgba(37,99,235,.25);
  transition:transform .18s cubic-bezier(.2,.8,.3,1.4),box-shadow .18s ease}
.nw-clink:hover{transform:scale(1.06);box-shadow:inset 0 0 0 1.2px rgba(37,99,235,.45),0 4px 12px rgba(37,99,235,.28)}
.nw-cico{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:22px;height:22px;border-radius:var(--nw-r-sm);text-decoration:none;font-size:11px;color:#fff;
  background:var(--nw-grad);box-shadow:0 1px 5px rgba(37,99,235,.4);
  transition:transform .18s cubic-bezier(.2,.8,.3,1.4),box-shadow .18s ease}
.nw-cico:hover{transform:scale(1.14);box-shadow:0 5px 14px rgba(37,99,235,.55)}
.nw-cico.wa{background:var(--nw-ok-grad);box-shadow:0 1px 5px rgba(14,159,110,.4)}
.nw-cico.wa:hover{box-shadow:0 5px 14px rgba(14,159,110,.55)}
.nw-jh__sub .nw-cchip i{color:inherit}

/* "আজ" তালিকায় এলাকার শিরোনাম ও তার কার্ডগুলো।
   দলের কার্ড flex-wrap-এ — `flex:1 1 300px` দিলে শেষ সারির কার্ড টেনে সারি ভরায়,
   গ্রিডে ছাড়লে যেটা খালি ঘর হয়ে থাকত। */
.nw-agrp-b{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.nw-agrp-b>.nw-job{flex:1 1 300px;min-width:0}
.nw-agrp{grid-column:1/-1;display:flex;align-items:center;gap:6px;margin:4px 0 2px;
  font-size:11.5px;font-weight:800;color:var(--nw-mut);letter-spacing:.01em}
.nw-agrp i{color:var(--nw-blue);font-size:11px}
.nw-agrp .c{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  padding:0 5px;border-radius:999px;background:var(--nw-grad);color:#fff;font-size:10.5px;font-weight:800}

/* ── টাকার সারি (চুক্তি · আদায় · বকেয়া · খরচ · লাভ) ────── */
.nw-mrow{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
/* ⚠️ "লাভ" বড় হরফে বলে flex-column-এ ওর লেবেল ২px উঁচুতে আর মান ২px নিচে বসত —
   এক সারিতে চোখে ধরা পড়ে (মেপে পাওয়া)। তাই স্থির উচ্চতার দুই গ্রিড-সারি:
   লেবেল সবার এক লাইনে, মান সবার এক বেসলাইনে — হরফ ছোট-বড় যা-ই হোক। */
.nw-mrow .m{display:grid;grid-template-rows:14px 20px;align-content:start;
  font-size:11.5px;font-weight:700;color:var(--nw-mut);line-height:14px}
.nw-mrow .m b{align-self:end;font-size:15px;font-weight:800;color:var(--nw-ink);line-height:1}
.nw-mrow .m.big b{font-size:18px}
.nw-mrow .grow{flex:1}
.nw-cost{color:var(--nw-warn)}

/* ── অফলাইন সূচক (সব ঠিক থাকলে দেখা যায় না) ───────────── */
.nw-off{position:fixed;left:12px;bottom:14px;z-index:60;display:none;align-items:center;gap:7px;
  max-width:min(74vw,320px);padding:8px 13px;border-radius:999px;cursor:pointer;
  font-weight:700;font-size:12.5px;line-height:1;color:#fff;
  background:linear-gradient(135deg,#475569,#64748b);box-shadow:0 4px 14px rgba(15,23,42,.35);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.4),box-shadow .2s ease}
.nw-off.on{display:inline-flex}
.nw-off:hover{transform:scale(1.05);box-shadow:0 8px 20px rgba(15,23,42,.45)}
.nw-off.wait{background:var(--nw-warn-grad);box-shadow:0 4px 14px rgba(217,119,6,.45)}
.nw-off.sync{background:var(--nw-grad);box-shadow:0 4px 14px rgba(37,99,235,.45)}
.nw-off b{font-weight:800;text-decoration:underline}
.nw-off .nw-spin{width:13px;height:13px;border-width:2px}
@media(max-width:560px){ .nw-off{bottom:76px} }   /* FAB-এর সাথে ধাক্কা না লাগে */

/* ── কাজের ৫ ধাপ (টাস্ক সিস্টেমের বদলি) ─────────────────
   idle ধাপও gradient + রিং — ghost/flat নয়; done সবুজ, চলতি নীল।
   ৫টা পাশাপাশি বলে hover zoom ১.০৬ (বেশি দিলে পাশেরটার উপর উঠে যায়)। */
.nw-stepwrap{display:flex;flex-direction:column;gap:5px;width:100%}
.nw-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%}
.nw-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-sizing:border-box;min-width:0;height:46px;padding:0 2px;border:0;border-radius:var(--nw-r-sm);
  cursor:pointer;font-weight:800;font-size:10.5px;line-height:1.15;font-family:inherit;
  color:var(--nw-blue);background:linear-gradient(135deg,#eaf1ff,#f7faff);
  box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.28),0 1px 4px rgba(37,99,235,.12);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.4),box-shadow .2s ease,filter .2s ease}
.nw-step i{font-size:13px;line-height:1}
.nw-step span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-step:hover{transform:scale(1.06) translateY(-1px);filter:brightness(1.04);
  box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.4),0 6px 16px rgba(37,99,235,.3)}
.nw-step:active{transform:scale(1.01)}
.nw-step.done{color:#fff;background:var(--nw-ok-grad);
  box-shadow:0 2px 8px rgba(14,159,110,.36)}
.nw-step.done:hover{box-shadow:0 7px 18px rgba(14,159,110,.5)}
.nw-step.on{color:#fff;background:var(--nw-grad);
  box-shadow:0 3px 12px rgba(37,99,235,.5)}
.nw-step.on:hover{box-shadow:0 8px 20px rgba(37,99,235,.6)}
.nw-stepnow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--nw-mut)}
.nw-stepnow b{font-size:12.5px;font-weight:800;color:var(--nw-ink)}
.nw-stepnow .ok{color:var(--nw-ok);font-weight:700}
.nw-stepnow .grow{flex:1}

/* ── কাগজের চিপ (আগের "কাগজ চাই" টাস্ক) ───────────────── */
.nw-chips{display:flex;flex-wrap:wrap;gap:6px;width:100%}
/* flex:1 1 auto — চিপগুলো টেনে সারি ভরায়, নইলে শেষ সারির ডানে মরা ফাঁকা (মাপা: ১৬৪px) */
.nw-chip{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;box-sizing:border-box;height:30px;
  padding:0 9px;border:0;border-radius:var(--nw-r-sm);cursor:pointer;
  font-weight:700;font-size:12px;line-height:1;font-family:inherit;
  color:var(--nw-mut);background:linear-gradient(135deg,#eef2f9,#f8fafd);
  box-shadow:inset 0 0 0 1.5px var(--nw-line);
  transition:transform .18s cubic-bezier(.2,.8,.3,1.4),box-shadow .18s ease,filter .18s ease}
.nw-chip i{font-size:11px;opacity:.85}
.nw-chip .x{opacity:0;margin-left:1px;font-size:14px;font-weight:800;line-height:1;
  padding:0 1px;transition:opacity .15s ease}
.nw-chip:hover{transform:scale(1.06);box-shadow:inset 0 0 0 1.5px rgba(37,99,235,.4),0 5px 14px rgba(37,99,235,.22)}
.nw-chip:hover .x{opacity:.55}
.nw-chip .x:hover{opacity:1;color:var(--nw-red)}
.nw-chip.on{color:#fff;background:var(--nw-ok-grad);box-shadow:0 2px 8px rgba(14,159,110,.34)}
.nw-chip.on:hover{box-shadow:0 6px 16px rgba(14,159,110,.48)}

/* কার্ডের হেডার সারি — শিরোনাম বাঁয়ে, বোতাম ডানে, একই center line */
.nw-cardh{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.nw-cardh>.nw-sec-h{margin:0;flex:1;min-width:0}
.nw-cardh>.nw-sec-h small{font-weight:600;color:var(--nw-mut);font-size:11.5px}

/* ── ক্লায়েন্ট টাইপ-অ্যাহেড (নতুন কাজের ফর্ম) ───────────── */
.nw-ac{position:relative}
.nw-ac__list{position:absolute;left:0;right:0;top:calc(100% + 3px);z-index:30;display:none;
  background:var(--nw-card);border:1px solid var(--nw-line);border-radius:var(--nw-r);
  box-shadow:0 8px 22px rgba(37,99,235,.2);max-height:206px;overflow-y:auto}
.nw-ac__list.on{display:block}
.nw-ac__it{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;
  font-size:13px;border-bottom:1px solid var(--nw-line);transition:background .14s ease}
.nw-ac__it:last-child{border-bottom:0}
.nw-ac__it:hover{background:rgba(37,99,235,.09)}
.nw-ac__it b{flex:1;min-width:0;font-weight:700;color:var(--nw-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-ac__it small{color:var(--nw-mut);font-size:11.5px;flex:0 0 auto}
.nw-hint{margin:0;font-size:11.5px;color:var(--nw-mut);display:flex;align-items:center;gap:5px}
.nw-hint.ok{color:var(--nw-ok);font-weight:700}

/* ছোট সেকশন লাইন — "কাজের এলাকা (ঐচ্ছিক)" */
.nw-secline{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  color:var(--nw-mut);letter-spacing:.01em;margin:2px 0 -4px}
.nw-secline small{font-weight:600;color:var(--nw-mut2)}

/* ভাঁজ করা "আরও" ─ ফর্মের বাকি ঘরগুলো লুকানো থাকে */
.nw-more{margin:0}
.nw-more>summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 0;font-size:12.5px;font-weight:800;color:var(--nw-blue);user-select:none}
.nw-more>summary::-webkit-details-marker{display:none}
.nw-more>summary i{transition:transform .18s ease}
.nw-more[open]>summary i{transform:rotate(90deg)}
/* ⚠️ display:flex সরাসরি দিলে UA-র লুকানো নিয়ম হেরে যায় আর ভাঁজ কখনো বন্ধ হয় না
   (মেপে ধরা: details.open=false, অথচ বডির উচ্চতা ২৭২px)। তাই open-এ বাঁধা। */
.nw-more__b{display:none;flex-direction:column;gap:10px;padding-top:6px}
.nw-more[open]>.nw-more__b{display:flex}

/* ── কার্ড ───────────────────────────────────────────── */
.nw-card{background:var(--nw-card);border-radius:var(--nw-r);padding:11px 13px;box-shadow:var(--nw-sh);
  border:1px solid var(--nw-line)}
.nw-card+.nw-card{margin-top:10px}
.nw-sec-h{font-size:12px;font-weight:800;color:var(--nw-mut);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}

/* ── KPI স্ট্রিপ ─────────────────────────────────────── */
.nw-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:9px;margin-bottom:12px}
.nw-kpi{background:var(--nw-card);border-radius:var(--nw-r);padding:11px 12px;box-shadow:var(--nw-sh);
  border:1px solid var(--nw-line);position:relative;overflow:hidden;cursor:pointer;
  transition:transform .18s,box-shadow .18s}
.nw-kpi:hover{transform:translateY(-2px);box-shadow:var(--nw-sh2)}
.nw-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--nw-grad)}
.nw-kpi.warn::before{background:var(--nw-warn-grad)} .nw-kpi.red::before{background:var(--nw-red-grad)}
.nw-kpi.ok::before{background:var(--nw-ok-grad)}
.nw-kpi b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.nw-kpi small{color:var(--nw-mut);font-size:11.5px;font-weight:700}
.nw-kpi i{position:absolute;right:10px;top:11px;font-size:16px;color:var(--nw-blue);opacity:.32}

/* ── ট্যাব (gradient pill · hover zoom · active গাঢ়) ──── */
.nw-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 1px 8px;margin-bottom:4px;scrollbar-width:none}
.nw-tabs::-webkit-scrollbar{display:none}
.nw-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border:0;
  border-radius:20px;cursor:pointer;font:700 12.5px/1 inherit;color:#fff;white-space:nowrap;
  background:var(--nw-grad);box-shadow:0 2px 8px rgba(37,99,235,.34);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.4),box-shadow .2s,filter .2s;opacity:.92}
.nw-tab:hover{transform:scale(1.12) translateY(-1px);box-shadow:0 8px 18px rgba(37,99,235,.5);filter:brightness(1.08);opacity:1}
.nw-tab.on{background:var(--nw-grad-d);opacity:1;box-shadow:0 4px 14px rgba(15,23,42,.4)}
.nw-tab .c{background:rgba(255,255,255,.28);border-radius:9px;padding:1px 7px;font-size:11px;font-weight:800}

/* ── কাজের তালিকা কার্ড ──────────────────────────────── */
.nw-jobs{display:flex;flex-direction:column;gap:8px}
.nw-job{background:var(--nw-card);border-radius:var(--nw-r);padding:10px 12px;box-shadow:var(--nw-sh);
  border:1px solid var(--nw-line);cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;
  display:flex;flex-direction:column;gap:7px}
.nw-job:hover{transform:translateY(-2px);box-shadow:var(--nw-sh2);border-color:var(--nw-blue)}
.nw-job__top{display:flex;align-items:flex-start;gap:8px}
.nw-job__top b{flex:1;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.nw-job__no{font-size:11px;font-weight:700;color:var(--nw-blue);background:rgba(37,99,235,.1);
  border-radius:4px;padding:2px 7px;white-space:nowrap}
.nw-job__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--nw-mut)}
.nw-job__meta i{color:var(--nw-blue);margin-right:2px}
.nw-job__foot{display:flex;align-items:center;gap:10px}
.nw-prog{flex:1;height:7px;border-radius:4px;background:var(--nw-line);overflow:hidden;min-width:60px}
.nw-prog>i{display:block;height:100%;border-radius:4px;background:var(--nw-grad);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.nw-prog.done>i{background:var(--nw-ok-grad)}
.nw-pct{font-size:12px;font-weight:800;color:var(--nw-ink);min-width:34px;text-align:right}
/* ⭐ কার্ডের বিল বোতাম — গ্রেডিয়েন্ট, hover-এ জুম (owner রুল); কার্ডে ক্লিক = কাজ খোলা */
.nw-billb{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:26px;height:26px;flex:0 0 26px;padding:0;border:0;border-radius:3px;cursor:pointer;
  font-size:12px;color:#fff;background:linear-gradient(135deg,#b45309,#f59e0b);
  box-shadow:0 2px 8px rgba(180,83,9,.38);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.4),box-shadow .2s ease,filter .2s ease}
.nw-billb:hover{transform:scale(1.16);box-shadow:0 8px 18px rgba(180,83,9,.5);filter:brightness(1.08)}
.nw-billb:active{transform:scale(1.05)}

/* ── স্ট্যাটাস ও প্রায়োরিটি ব্যাজ ─────────────────────── */
.nw-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;border-radius:20px;
  padding:3px 9px;line-height:1;white-space:nowrap}
.nw-s-new{background:rgba(37,99,235,.12);color:var(--nw-blue)}
.nw-s-active{background:rgba(37,99,235,.14);color:var(--nw-blue-d)}
.nw-s-stuck{background:rgba(217,119,6,.15);color:#b45309}
.nw-s-review{background:rgba(147,51,234,.14);color:#7c3aed}
.nw-s-done{background:rgba(14,159,110,.15);color:#047857}
.nw-s-cancelled{background:rgba(100,116,139,.16);color:var(--nw-mut)}
.nw-due{color:var(--nw-red);font-weight:800}
.nw-paid{color:var(--nw-ok);font-weight:800}
.nw-pri{width:8px;height:8px;border-radius:50%;flex:0 0 auto;margin-top:5px}
.nw-pri.p1{background:#94a3b8}.nw-pri.p2{background:var(--nw-warn)}.nw-pri.p3{background:var(--nw-red);box-shadow:0 0 0 3px rgba(220,38,38,.18)}

/* ── কাজের বিস্তারিত হেডার ────────────────────────────── */
.nw-jh{background:var(--nw-card);border-radius:var(--nw-r);padding:12px 14px;box-shadow:var(--nw-sh);
  border:1px solid var(--nw-line);margin-bottom:10px;position:relative;overflow:hidden}
.nw-jh::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--nw-grad)}
.nw-jh__top{display:flex;align-items:flex-start;gap:9px;margin-bottom:8px}
.nw-jh__top h2{flex:1;font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.nw-jh__sub{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px;color:var(--nw-mut);margin-bottom:9px}
.nw-jh__sub i{color:var(--nw-blue)}
.nw-jh__money{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--nw-line)}
.nw-jh__money .m{font-size:13px;color:var(--nw-mut);font-weight:600}
.nw-jh__money .m b{font-size:15px;color:var(--nw-ink);font-weight:800;margin-left:3px}
.nw-jh__money .grow{flex:1}

/* ── টাস্ক ───────────────────────────────────────────── */
.nw-tk{display:flex;align-items:flex-start;gap:9px;padding:9px 10px;border-radius:var(--nw-r-sm);
  background:var(--nw-card);border:1px solid var(--nw-line);box-shadow:var(--nw-sh);margin-bottom:7px;
  transition:border-color .15s}
.nw-tk:hover{border-color:var(--nw-blue)}
.nw-tk__ck{width:20px;height:20px;flex:0 0 auto;border-radius:6px;border:2px solid var(--nw-fld-line);
  cursor:pointer;display:grid;place-items:center;color:#fff;font-size:11px;margin-top:1px;transition:all .18s;background:var(--nw-card)}
.nw-tk__ck.on{background:var(--nw-ok-grad);border-color:transparent;box-shadow:0 2px 6px rgba(14,159,110,.4)}
.nw-tk__b{flex:1;min-width:0}
.nw-tk__b .t{font-size:13.5px;font-weight:600}
.nw-tk.done .nw-tk__b .t{text-decoration:line-through;color:var(--nw-mut)}
.nw-tk__b .m{font-size:11.5px;color:var(--nw-mut);display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.nw-tk__kind{font-size:10px;font-weight:800;border-radius:4px;padding:1px 6px;white-space:nowrap}
.nw-k-task{background:rgba(37,99,235,.12);color:var(--nw-blue)}
.nw-k-docreq{background:rgba(217,119,6,.14);color:#b45309}
.nw-k-deliverable{background:rgba(14,159,110,.14);color:#047857}

/* ── ফাইল গ্রিড ──────────────────────────────────────── */
.nw-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:9px}
.nw-file{background:var(--nw-card);border-radius:var(--nw-r-sm);border:1px solid var(--nw-line);box-shadow:var(--nw-sh);
  overflow:hidden;cursor:pointer;transition:transform .16s,box-shadow .16s}
.nw-file:hover{transform:translateY(-2px);box-shadow:var(--nw-sh2)}
.nw-file__th{aspect-ratio:1;background:linear-gradient(135deg,#eef4ff,#dbe7fb);display:grid;place-items:center;overflow:hidden}
:root[data-theme="dark"] .nw-file__th{background:linear-gradient(135deg,#16223a,#0e1830)}
.nw-file__th img{width:100%;height:100%;object-fit:cover}
.nw-file__th i{font-size:30px;color:var(--nw-blue);opacity:.6}
.nw-file__n{font-size:11px;font-weight:600;padding:6px 7px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-file__n small{display:block;color:var(--nw-mut);font-size:10px;font-weight:500}

/* ── টাইমলাইন ────────────────────────────────────────── */
.nw-tl{position:relative;padding-left:20px}
.nw-tl::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;background:var(--nw-line)}
.nw-ev{position:relative;padding:0 0 13px 4px}
.nw-ev::before{content:"";position:absolute;left:-17px;top:3px;width:11px;height:11px;border-radius:50%;
  background:var(--nw-grad);box-shadow:0 0 0 3px var(--nw-page)}
.nw-ev.client::before{background:var(--nw-ok-grad)}
.nw-ev.comment::before{background:var(--nw-warn-grad)}
.nw-ev .msg{font-size:13px;font-weight:500;white-space:pre-wrap}
.nw-ev .tm{font-size:11px;color:var(--nw-mut);margin-top:1px}
.nw-ev .who{font-weight:800;color:var(--nw-blue)}

/* ── খালি অবস্থা ─────────────────────────────────────── */
.nw-empty{text-align:center;padding:34px 16px;color:var(--nw-mut)}
.nw-empty i{font-size:38px;color:var(--nw-blue);opacity:.35;display:block;margin-bottom:10px}
.nw-empty p{font-size:14px;font-weight:600;margin-bottom:3px;color:var(--nw-ink)}
.nw-empty small{font-size:12.5px}
.nw-muted{color:var(--nw-mut)}

/* ── ফ্লোটিং অ্যাকশন বোতাম ───────────────────────────── */
.nw-fab{position:fixed;right:16px;bottom:78px;z-index:60;width:52px;height:52px;border-radius:50%;border:0;
  cursor:pointer;color:#fff;font-size:22px;background:var(--nw-grad);box-shadow:0 6px 20px rgba(37,99,235,.5);
  display:grid;place-items:center;transition:transform .2s cubic-bezier(.2,.8,.3,1.4),box-shadow .2s}
.nw-fab:hover{transform:scale(1.14) rotate(90deg);box-shadow:0 10px 26px rgba(37,99,235,.62)}

/* ── মডাল ────────────────────────────────────────────── */
.nw-ov{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.5);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;padding:0;animation:nwFade .18s ease}
@media(min-width:640px){.nw-ov{align-items:center;padding:20px}}
.nw-modal{background:var(--nw-card);width:100%;max-width:540px;max-height:92vh;border-radius:16px 16px 0 0;
  box-shadow:0 -8px 40px rgba(37,99,235,.3);display:flex;flex-direction:column;overflow:hidden;animation:nwUp .24s cubic-bezier(.2,.8,.3,1.1)}
@media(min-width:640px){.nw-modal{border-radius:14px;box-shadow:0 20px 60px rgba(37,99,235,.35);animation:nwPop .22s cubic-bezier(.2,.8,.3,1.2)}}
.nw-modal__h{display:flex;align-items:center;gap:9px;padding:13px 15px;border-bottom:1px solid var(--nw-line);
  background:var(--nw-grad);color:#fff}
.nw-modal__h b{flex:1;font-size:15px;font-weight:800}
.nw-modal__h .x{width:30px;height:30px;border:0;border-radius:7px;background:rgba(255,255,255,.2);color:#fff;
  cursor:pointer;font-size:16px;display:grid;place-items:center;transition:background .15s}
.nw-modal__h .x:hover{background:rgba(255,255,255,.34)}
.nw-modal__b{padding:14px 15px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
.nw-modal__f{display:flex;gap:8px;padding:12px 15px;border-top:1px solid var(--nw-line);background:var(--nw-page)}
.nw-modal__f .nw-btn{flex:1}
@keyframes nwFade{from{opacity:0}to{opacity:1}}
@keyframes nwUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes nwPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

/* ── টোস্ট ───────────────────────────────────────────── */
.nw-toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(12px);z-index:3000;
  background:var(--nw-grad-d);color:#fff;padding:10px 18px;border-radius:24px;font-size:13px;font-weight:700;
  box-shadow:0 8px 24px rgba(15,23,42,.4);opacity:0;transition:opacity .22s,transform .22s;pointer-events:none;max-width:88vw;text-align:center}
.nw-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.nw-toast.ok{background:var(--nw-ok-grad)} .nw-toast.err{background:var(--nw-red-grad)}

/* ── লোডিং ───────────────────────────────────────────── */
.nw-load{display:flex;align-items:center;justify-content:center;gap:10px;padding:34px;color:var(--nw-mut);font-weight:600}
.nw-spin{width:22px;height:22px;border:3px solid var(--nw-line);border-top-color:var(--nw-blue);border-radius:50%;animation:nwSpin .7s linear infinite}
@keyframes nwSpin{to{transform:rotate(360deg)}}

/* ── ক্লায়েন্ট সারি ──────────────────────────────────── */
.nw-cli{display:flex;align-items:center;gap:10px;background:var(--nw-card);border:1px solid var(--nw-line);
  box-shadow:var(--nw-sh);border-radius:var(--nw-r);padding:9px 12px;margin-bottom:7px;cursor:pointer;
  transition:transform .15s,box-shadow .15s,border-color .15s}
.nw-cli:hover{transform:translateY(-2px);box-shadow:var(--nw-sh2);border-color:var(--nw-blue)}
.nw-cli__av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--nw-grad);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px;box-shadow:var(--nw-sh)}
.nw-cli__b{flex:1;min-width:0}
.nw-cli__b b{font-size:14px;font-weight:700;display:block}
.nw-cli__b small{font-size:12px;color:var(--nw-mut);display:flex;gap:8px;flex-wrap:wrap}

/* ── লিংক সারি (শেয়ার) ───────────────────────────────── */
.nw-link{display:flex;align-items:center;gap:8px;background:var(--nw-page);border:1px solid var(--nw-line);
  border-radius:var(--nw-r-sm);padding:8px 10px;font-size:12px}
.nw-link input{flex:1;border:0;background:transparent;color:var(--nw-ink);font:600 12px/1.4 inherit;min-width:0}
.nw-link .st{font-size:11px;color:var(--nw-mut)}

/* ══════════════════ পাবলিক ক্লায়েন্ট পোর্টাল ══════════════════ */
.nwp{max-width:600px;margin:0 auto;padding:14px 12px 40px}
.nwp-brand{display:flex;align-items:center;gap:10px;background:var(--nw-grad);color:#fff;border-radius:var(--nw-r);
  padding:14px 16px;box-shadow:var(--nw-sh2);margin-bottom:12px}
.nwp-brand .lg{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:20px;flex:0 0 auto}
.nwp-brand b{font-size:17px;font-weight:800;display:block;line-height:1.2}
.nwp-brand small{font-size:12.5px;opacity:.9}
.nwp-hero{background:var(--nw-card);border-radius:var(--nw-r);padding:14px 16px;box-shadow:var(--nw-sh);
  border:1px solid var(--nw-line);margin-bottom:12px}
.nwp-hero h1{font-size:18px;font-weight:800;margin-bottom:4px;letter-spacing:-.01em}
.nwp-hero .prog-lg{height:11px;border-radius:6px;background:var(--nw-line);overflow:hidden;margin:10px 0 6px}
.nwp-hero .prog-lg>i{display:block;height:100%;background:var(--nw-grad);border-radius:6px;transition:width .6s cubic-bezier(.2,.8,.3,1)}
.nwp-gate{display:flex;align-items:center;gap:11px;border-radius:var(--nw-r);padding:12px 14px;margin-bottom:12px;
  border:1px solid;font-size:13px}
.nwp-gate.lock{background:rgba(217,119,6,.09);border-color:rgba(217,119,6,.3);color:#92400e}
.nwp-gate.open{background:rgba(14,159,110,.09);border-color:rgba(14,159,110,.3);color:#065f46}
.nwp-gate i{font-size:22px}
:root[data-theme="dark"] .nwp-gate.lock{color:#fbbf77}
:root[data-theme="dark"] .nwp-gate.open{color:#6ee7b7}
.nwp-pin{max-width:340px;margin:60px auto;text-align:center}
.nwp-pin i{font-size:44px;color:var(--nw-blue);margin-bottom:14px;display:block}

/* ══════════════════ কাজের ক্যালেন্ডার ══════════════════ */
.nw-cal-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.nw-cal-nav .mo{flex:1;text-align:center;font-size:16px;font-weight:800;letter-spacing:-.01em}
.nw-cal-sum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.nw-cal-chip{display:inline-flex;align-items:center;gap:6px;background:var(--nw-card);border:1px solid var(--nw-line);
  box-shadow:var(--nw-sh);border-radius:20px;padding:5px 11px;font-size:12px;font-weight:700;color:var(--nw-mut)}
.nw-cal-chip b{color:var(--nw-ink);font-size:13px}
.nw-cal-chip .d{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
/* সেল-গ্র্যাডিয়েন্ট ভেরিয়েবল (light/dark) */
.nw-cal{--cga:#ffffff;--cgb:#eaf1ff;--cghg:#d7f3e6;--coda:#fff6f6;--codb:#ffe4e4;
  background:var(--nw-card);border:1px solid var(--nw-line);box-shadow:var(--nw-sh);border-radius:var(--nw-r);overflow:hidden}
:root[data-theme="dark"] .nw-cal{--cga:#152238;--cgb:#0f1a2c;--cghg:#123424;--coda:#241420;--codb:#33161d}
:root[data-theme="light"] .nw-cal{--cga:#ffffff;--cgb:#eaf1ff;--cghg:#d7f3e6;--coda:#fff6f6;--codb:#ffe4e4}
.nw-dow{display:grid;grid-template-columns:repeat(7,1fr);background:var(--nw-grad);color:#fff}
.nw-dow span{text-align:center;font-size:11px;font-weight:800;padding:8px 0;letter-spacing:.02em}
.nw-dow span.we{background:rgba(255,255,255,.14)}
.nw-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:10px;background:var(--nw-card)}
.nw-cell{position:relative;min-height:60px;border-radius:9px;padding:5px 6px;display:flex;flex-direction:column;gap:3px;
  background:var(--nw-card);border:1px solid rgba(107,178,58,.2);
  box-shadow:0 5px 14px rgba(107,178,58,.9);transition:transform .18s cubic-bezier(.2,.8,.3,1.3),box-shadow .18s,background .16s,border-color .16s}
.nw-cell.pad{background:transparent;border:0;box-shadow:none}
.nw-cell.has{cursor:pointer}
.nw-cell.has:hover{transform:scale(1.08);z-index:3;background:#4e9a2e;border-color:#4e9a2e;color:#fff;
  box-shadow:inset 0 -4px 0 #35691c, 0 14px 28px rgba(107,178,58,.9)}
.nw-cell.has:hover .n{background:rgba(255,255,255,.24);color:#fff}
.nw-cell.has:hover .cnt{background:#fff;color:#4e9a2e}
.nw-cell.has:active{transform:scale(1.03)}
.nw-cell.today{background:var(--nw-grad);border-color:transparent;box-shadow:0 5px 16px rgba(37,99,235,.55)}
.nw-cell.today .n{background:rgba(255,255,255,.28);color:#fff}
.nw-cell.today .dots .dot{box-shadow:0 0 0 1.5px rgba(255,255,255,.75)}
.nw-cell.overdue{background:var(--nw-card);border-color:rgba(220,38,38,.32)}
.nw-cell.overdue::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--nw-red-grad)}
.nw-cell.overdue.today::before{display:none}
.nw-cell .n{align-self:flex-start;min-width:22px;height:20px;padding:0 6px;border-radius:7px;display:inline-flex;
  align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:var(--nw-blue);
  background:rgba(37,99,235,.12)}
.nw-cell.overdue .n{color:#dc2626;background:rgba(220,38,38,.12)}
.nw-cell .dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:auto}
.nw-cell .dot{width:8px;height:8px;border-radius:50%;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.nw-cell .cnt{position:absolute;right:5px;top:5px;font-size:10px;font-weight:800;color:#fff;background:var(--nw-grad);
  border-radius:9px;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px 5px rgba(37,99,235,.45)}
.nw-cell.today .cnt{background:rgba(255,255,255,.9);color:var(--nw-blue)}
.nw-cell.overdue .cnt{background:var(--nw-red-grad);box-shadow:0 2px 5px rgba(220,38,38,.45)}
@media(max-width:560px){.nw-cal-grid{gap:3px;padding:4px}.nw-cell{min-height:52px;padding:4px;border-radius:7px}.nw-cell .n{font-size:10.5px;min-width:19px}}

/* দিনের প্যানেল (মডালের ভেতর মিনি জব-লিস্ট) */
.nw-day-mini{display:flex;flex-direction:column;gap:6px}
.nw-day-empty{text-align:center;color:var(--nw-mut);padding:18px;font-size:13px}
.nw-legend{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:8px;padding-top:8px;border-top:1px solid var(--nw-line)}
.nw-legend span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--nw-mut);font-weight:600}
.nw-legend .d{width:9px;height:9px;border-radius:50%}

/* ── ফাইলের স্তর: রিভিউ → অনুমোদিত → ক্লায়েন্টে প্রকাশিত ──────────── */
.nw-tab.sm{height:28px;padding:0 11px;font-size:11.5px}
.nw-tab .c.alert{background:var(--nw-red);color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.nw-file__th{position:relative}
.nw-fst{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:4px;
  font-size:9.5px;font-weight:800;line-height:1;padding:3px 4px;color:#fff;background:rgba(15,23,42,.72);
  white-space:nowrap;overflow:hidden}
.nw-fst i{font-size:9px}
.nw-file.st-review   .nw-fst{background:linear-gradient(135deg,#b45309,#d97706)}
.nw-file.st-rejected .nw-fst{background:var(--nw-red-grad)}
.nw-file.st-approved .nw-fst{background:linear-gradient(135deg,#334155,#475569)}
.nw-file.st-published .nw-fst{background:var(--nw-ok-grad)}
.nw-file.st-review{border-color:#f0b357}
.nw-file.st-rejected{border-color:#f19a9a}
.nw-fgt{position:absolute;top:5px;right:5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:9px;color:#fff;box-shadow:0 1px 4px rgba(15,23,42,.35)}
.nw-fgt.free{background:var(--nw-ok)}
.nw-fgt.lock{background:var(--nw-red)}
.nw-fs-review{background:rgba(217,119,6,.15);color:#b45309}
.nw-fs-rejected{background:rgba(220,38,38,.13);color:var(--nw-red)}
.nw-fs-approved{background:rgba(100,116,139,.16);color:#475569}
.nw-fs-published{background:rgba(14,159,110,.14);color:var(--nw-ok)}
.nw-fact{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.nw-fact .nw-btn{flex:1 1 auto;justify-content:center}

/* ── কর্মী / তৃতীয়-পক্ষের পাতা (#/wv) ───────────────────────────── */
.wv-drop{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;
  padding:20px 14px;border:2px dashed var(--nw-blue);border-radius:var(--nw-r);
  background:linear-gradient(135deg,#eef4ff,#dbe7fb);color:var(--nw-blue-d);text-align:center;
  transition:transform .18s,box-shadow .18s,filter .18s}
.wv-drop:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(37,99,235,.28);filter:brightness(1.03)}
.wv-drop i{font-size:26px}
.wv-drop b{font-size:13.5px;font-weight:800}
.wv-drop small{font-size:11.5px;color:var(--nw-mut)}
:root[data-theme="dark"] .wv-drop{background:linear-gradient(135deg,#16223a,#0e1830)}
.wv-f{align-items:flex-start}
.wv-f .m{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* এক সারিতে ফিল্ড থাকলে সবটুকু চওড়া ভাগ করে নেবে — ডানে মরা ফাঁকা নয়
   (inline style="flex:0 0 …" দেওয়া ঘরগুলো আগের মতোই সরু থাকবে) */
.nw-row>.nw-f{flex:1 1 0}
.nw-revdot{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;border-radius:20px;
  padding:3px 9px;line-height:1;white-space:nowrap;color:#fff;
  background:linear-gradient(135deg,#b45309,#d97706);box-shadow:0 2px 7px rgba(180,83,9,.4)}
.nw-fgt.wk{background:linear-gradient(135deg,#7c3aed,#a855f7);right:auto;left:5px}

/* ═══════════════════════════════════════════════════════════════════
   📐 রেসপন্সিভ ফিল লেয়ার — মোবাইল · ল্যাপটপ · ডেস্কটপ (২০২৬-০৮-১৫)
   নিয়ম: সারিতে জায়গা খালি থাকলে নতুন উল্লম্ব জায়গা নয় — আগে
   আড়াআড়ি (horizontal) পূরণ করো। তাই প্রতিটি তালিকা `auto-fill` গ্রিড:
   ছোট পর্দায় ১ কলাম, চওড়ায় নিজে থেকে ২/৩/৪ কলাম — কোনো JS নেই।
   ⚠️ কোনো ব্রেকপয়েন্টেই padding/gap বাড়ে না — কম্প্যাক্ট অটুট।
   ═══════════════════════════════════════════════════════════════════ */

/* ── ০. এক সারিতে নিখুঁত align (সব পর্দায়) ───────────────────────────
   ⚠️ মাপা বাগ: মডালে `.nw-row`-এর এক ঘরে label + আইকন-বাটন থাকলে বাটনের
   উচ্চতা ৩০px, পাশের select ৩৬px → সেন্টার লাইন ৪px উঁচু-নিচু হত।
   ঘরে বসা বাটনকেও কন্ট্রোল-উচ্চতা দিলে সব একই লাইনে বসে। */
.nw-row>.nw-f>.nw-btn{height:var(--nw-ctl)}
.nw-row>.nw-f>.nw-btn.nw-ico{width:var(--nw-ctl);padding:0}
/* একই নিয়ম অ্যাকশন-বারে: সার্চ ইনপুটের পাশের আইকন-বাটনও কন্ট্রোল-উচ্চতায়
   (৩০px বনাম ৩৮px — সেন্টার মিললেও চোখে ছোট দেখাত)। `.sm` চিহ্নিতগুলো ছোটই থাকে। */
.nw-bar>.nw-btn.nw-ico:not(.sm){height:var(--nw-ctl);width:var(--nw-ctl)}

/* ── ১. কাজের তালিকা (হাব · বকেয়া · পাবলিক পোর্টাল) ───────────────── */
.nw-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:8px;align-content:start}
.nw-jobs>*{min-width:0}
/* এক সারির কার্ডগুলো সমান উচ্চতার — মেটা ছোট-বড় হলেও প্রগ্রেস বার একই লাইনে বসে */
.nw-job__foot{margin-top:auto}

/* ── ২. ক্লায়েন্ট তালিকা ─────────────────────────────────────────── */
#clList{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:7px}
#clList>*{min-width:0}
#clList .nw-cli{margin-bottom:0}
/* লোডার / খালি-বার্তা গ্রিডের এক ঘরে আটকে যেন সরু না হয় */
#clList>.nw-load,#clList>.nw-empty{grid-column:1/-1}

/* ── ৩. কাজের বিস্তারিত — ট্যাব-ভিত্তিক বডি (JS ক্লাস বসায়) ───────── */
.nw-jb>.nw-load,.nw-jb>.nw-empty,.nw-jb>.nw-bar{grid-column:1/-1}
/* টাস্ক ও লেনদেনের সারি: চওড়ায় পাশাপাশি */
#tList{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:7px}
#tList>*{min-width:0}
.nw-jb-pay{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:7px}
.nw-jb-pay>.nw-card{grid-column:1/-1;margin-top:0}
.nw-jb-pay>.nw-tk{margin:0}

/* ── ৪. ছবি/ফাইল টাইল — বড় পর্দায় একটু বড়, তবু পুরো সারি ভরাট ──── */
@media(min-width:900px){.nw-files{grid-template-columns:repeat(auto-fill,minmax(124px,1fr))}}

@media(min-width:820px){
  /* ট্যাব-স্ট্রিপ পুরো সারি জুড়ে — ডানে মরা ফাঁকা নয় */
  .nw-tabs{overflow-x:visible}
  .nw-tabs>.nw-tab{flex:1 1 0;justify-content:center;min-width:0}
  .nw-tabs>.nw-tab i{flex:0 0 auto}

  /* সারাংশ ট্যাব: জমির তফসিল ও নোট পাশাপাশি */
  .nw-jb-sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:10px;align-items:start}
  .nw-jb-sum>.nw-card{margin-top:0}

  /* সময়রেখা: চওড়ায় বহু-কলাম — টানা লম্বা রেখা বাদ, প্রতিটি ঘটনা নিজে দাঁড়ায় */
  .nw-jb-tl .nw-tl{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:7px;padding-left:0}
  .nw-jb-tl .nw-tl::before{display:none}
  .nw-jb-tl .nw-ev{padding:7px 9px 7px 22px;border-radius:var(--nw-r-sm);
    background:var(--nw-card);border:1px solid var(--nw-line);box-shadow:var(--nw-sh)}
  .nw-jb-tl .nw-ev::before{left:8px;top:11px}
}

/* ── ৫. কাজের হেডার: বাঁয়ে পরিচয় · ডানে অগ্রগতি ও টাকা (এক সারি) ── */
@media(min-width:960px){
  .nw-jh{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,auto);
    column-gap:16px;row-gap:8px;align-items:center}
  /* ⭐ আগে nth-child দিয়ে ঘর বাছা হতো — drawJob()-এর ক্রম বদলালেই নীরবে ভাঙত
     (৫ ধাপে যাওয়ার সময় ঠিক তা-ই হলো: অগ্রগতি-সারি সরায় স্টেপার cell পেল না
     আর ৯৭৮px হেডারে মাত্র ৩৭২px জুড়ে বসল)। এখন ক্লাস ধরেই বসানো হয়। */
  .nw-jh>.nw-jh__top{grid-area:1/1;margin-bottom:0}
  .nw-jh>.nw-jh__sub{grid-area:2/1;margin-bottom:0}
  /* টাকার ব্লক ডানে, দুই সারি জুড়ে — নইলে ডান কলামের নিচের ঘর ফাঁকা পড়ে থাকত */
  .nw-jh>.nw-jh__money{grid-column:2;grid-row:1/3;align-self:center;
    justify-content:flex-end;border-top:0;padding-top:0}
  /* ধাপের সারি পুরো প্রস্থ জুড়ে — অগ্রগতি ট্র্যাকের মতো দেখায়, ডানে ফাঁকা থাকে না */
  .nw-jh>.nw-stepwrap{grid-column:1/-1;grid-row:3}
}

/* ── ৬. ক্লায়েন্ট পোর্টাল (#/cv · #/jv) — ডেস্কটপে ৬০০px-এ আটকে থাকবে না ── */
@media(min-width:900px){
  .nwp{max-width:1080px;padding:14px 16px 40px}
  .nwp-hero .prog-lg{margin:8px 0 5px}
}

/* ── ৭. ক্যালেন্ডার — চওড়া পর্দায় ঘর একটু উঁচু, তথ্য পড়া যায় ────── */
@media(min-width:1000px){.nw-cell{min-height:76px}}

/* ── ৮. মোবাইল/ট্যাব: অ্যাকশন-বার ও ট্যাব-স্ট্রিপ সারি পূরণ করবে ──────
   ⚠️ মাপা বাগ (৩৭৫px): বার ভেঙে ৩ সারি হত আর দ্বিতীয় সারির ডানে
   **১৫২px মরা ফাঁকা** পড়ে থাকত (বাটনগুলো নিজের মাপে বসে থাকত);
   ট্যাব-স্ট্রিপ ১৫৮px কেটে যেত। এখন:
   সারি ১ = সার্চ + আইকন-বাটন · সারি ২ = বাকি বাটন সমান ভাগে পুরো চওড়া। */
/* ৮ক. ৮১৯px পর্যন্ত (মোবাইল + ট্যাব): সারিতে যা-ই পড়ুক, grow করে ভরে নেবে।
   ⚠️ ব্রেকপয়েন্ট ৮১৯ — ঠিক এখান থেকেই ডেস্কটপের `min-width:820px` ধরে,
   মাঝে কোনো ফাঁক থাকে না (নইলে ৭০০px-এ কোনো নিয়মই লাগত না)। */
@media(max-width:819px){
  .nw-bar>.nw-btn,.nw-bar>label.nw-btn{flex:1 1 auto;justify-content:center}
  .nw-bar>.nw-btn.nw-ico{flex:0 0 auto}
  /* বারের ভেতরের ফিল্টার-চিপ (ফাইল ট্যাব: সব · রিভিউ · অনুমোদিত · ক্লায়েন্টে)
     — মাপা: ডানে ৫০px মরা ফাঁকা থাকত, এখন সারি ভাগ করে নেয় */
  .nw-bar>.nw-tab{flex:1 1 auto;justify-content:center;min-width:0}
  /* ফাঁকা spacer (`<div style="flex:1">`) সারির ভেতরেই মরা জায়গা খায় */
  .nw-bar>[style*="flex:1"]{display:none}
  /* ট্যাব: কেটে যাওয়ার বদলে সারি ভরে পরের লাইনে — সব ট্যাব একসাথে দেখা যায় */
  .nw-tabs{flex-wrap:wrap;overflow-x:visible;padding-bottom:6px}
  .nw-tabs>.nw-tab{flex:1 1 auto;justify-content:center;min-width:0}
}

/* ৮খ. সরু পর্দা (৬৪০px-এর নিচে) — ⭐ owner: "তালিকাটাই হাইলাইট হোক"
   উপরের chrome (KPI + বার + ট্যাব) যত কম সারি ও কম উচ্চতা নেয়, তত বেশি
   কাজ চোখে পড়ে। মাপা: আগে chrome = ৪৫৭px (৬৬৭px পর্দায় মাত্র ২টি কার্ড)।
   তিনটি সিদ্ধান্ত:
   ১) সার্চ-সহ বারে বাটন = **শুধু আইকন** → সার্চ ও সব অ্যাকশন এক সারিতে
   ২) ট্যাবে আইকন বাদ, শুধু লেখা → ৬টি ট্যাব **এক সারিতে** (আগে ২ সারি)
   ৩) KPI টাইল অর্ধেক উচ্চতায়
   ⚠️ লেখা লুকাতে `font-size:0` — টেক্সট-নোড CSS দিয়ে অন্যভাবে লুকানো যায় না;
   আইকনের নিজের `.nw-btn i{font-size:13px}` আছে বলে সে অক্ষত থাকে। */
@media(max-width:640px){
  /* ১) সার্চ-সহ বার: সব বাটন বর্গাকার আইকন, সার্চ বাকিটুকু নেয় → এক সারি।
     `:has()` না বুঝলে আগের ২-সারি আচরণেই ফিরে যায় — কিছু ভাঙে না। */
  .nw-bar:has(.nw-search)>.nw-search{flex:1 1 100px;min-width:0}
  .nw-bar:has(.nw-search)>.nw-btn{flex:0 0 auto;width:var(--nw-ctl);padding:0;
    font-size:0;gap:0;justify-content:center}
  /* সার্চ ছাড়া বারে (যেমন "নতুন টাস্ক") বাটন লেখাসহ পুরো সারি ভরে — ওখানে
     আইকন-অনলি করলে উল্টো ৩২০px মরা ফাঁকা তৈরি হত */
  .nw-bar:not(:has(.nw-search))>.nw-search{flex:1 1 calc(100% - 46px);min-width:0}

  /* ২) ট্যাব: আইকন বাদ → লেখা দিয়েই ৬টি এক সারিতে ধরে */
  .nw-tabs>.nw-tab>i{display:none}
  .nw-tabs>.nw-tab{height:30px;padding:0 6px;gap:4px}

  /* ৩) KPI টাইল খাড়া নয়, **পাশাপাশি** — সংখ্যা বাঁয়ে, লেখা ডানে।
     আগে লম্বা লেবেল ("ফাইল রিভিউ দরকার") দুই লাইনে ভেঙে টাইল ৫১px করত;
     পাশাপাশি হলে দুই লাইনেও টাইল ~৩৬px, রঙের বাঁ-দাগ ও অর্থ অটুট।
     সাজানোর কোনার আইকনটা মোবাইলে বাদ — লেখা তার নিচে ঢুকে যেত। */
  .nw-kpis{gap:5px;margin-bottom:7px}
  .nw-kpi{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:5px}
  .nw-kpi b{display:inline;flex:0 0 auto;font-size:14px;line-height:1.15}
  .nw-kpi b[style]{font-size:12.5px!important}   /* টাকার KPI-তে inline ১৮px */
  .nw-kpi small{display:block;min-width:0;font-size:9px;line-height:1.2}
  .nw-kpi i{display:none}
  .nw-kpi::before{width:3px}
  .nw-bar{gap:6px;margin-bottom:7px}
  .nw-tabs{gap:5px;padding:1px 1px 5px;margin-bottom:2px}
  .nw-title{margin-bottom:7px}

  /* ৪) কাজের হেডারও একই নিয়মে — মাপা: ২২৬px, যার ৮০px শুধু টাকার সারি
     (৩টি অঙ্ক + ২টি লেখা-বাটন দুই লাইনে ভাঙত)। বাটন আইকন-অনলি হলে
     পুরো টাকার সারি এক লাইনে নামে। */
  .nw-jh{padding:8px 10px}
  .nw-jh__top{margin-bottom:6px}
  .nw-jh__top h2{font-size:15px}
  .nw-jh__sub{gap:5px;margin-bottom:6px;font-size:11.5px}
  .nw-jh__money{gap:7px;padding-top:6px}
  .nw-jh__money .m{font-size:11.5px}
  .nw-jh__money .m b{font-size:13px}
  .nw-jh .nw-btn.sm{flex:0 0 auto;width:30px;padding:0;font-size:0;gap:0;justify-content:center}
}

/* ── ৯. মোবাইল (৩৭৫px) — গ্রিড ১ কলামে নামে, ফাঁক আরও কম ────────── */
@media(max-width:420px){
  /* ⚠️ সরু পর্দায় ট্যাবের লেখা উপচে পড়ত (মাপা) — padding ও লেখা ছোট করলেই ধরে */
  .nw-tab{padding:0 6px;gap:4px;font-size:11.5px}
  .nw-tab .c{padding:1px 4px;font-size:9.5px}
  .nw-jobs,#clList,#tList,.nw-jb-pay{grid-template-columns:1fr;gap:6px}
  .nw-kpis{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}
}