/* ==========================================================
   BizCare ERP — clean, calm, easy to read
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Bengali:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#0f2a47;          /* sidebar */
  --ink-2:#1f3b5c;
  --ink-soft:#64748b;
  --paper:#f4f6fa;
  --surface:#ffffff;
  --line:#e2e8f0;
  --line-soft:#eef2f6;
  --brass:#2563eb;        /* primary */
  --brass-soft:#eaf1fe;
  --pos:#15803d;
  --neg:#b91c1c;
  --radius:10px;
  --shadow:0 1px 2px rgba(15,42,71,.05), 0 2px 10px rgba(15,42,71,.04);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter','Noto Sans Bengali',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--paper); color:#1e293b;
  font-size:14.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.lang-bn{font-family:'Noto Sans Bengali','Inter',system-ui,sans-serif;font-size:15px}
a{color:var(--brass);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.3;margin:0 0 .5rem;color:#0f172a}
h1{font-size:1.3rem;font-weight:650;letter-spacing:-.01em}
h2{font-size:1.05rem;font-weight:600}
h3{font-size:.95rem;font-weight:600}
.muted{color:var(--ink-soft);font-size:.92em}
.hint{color:var(--ink-soft);font-weight:400;font-size:.8em}

.n,td.n,th.n,.figure{
  font-family:'IBM Plex Mono','Inter',monospace;
  font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap;
}
.pos{color:var(--pos)} .neg{color:var(--neg)}

/* ---------- layout ---------- */
.shell{display:flex;min-height:100vh}
.side{
  width:232px;flex:0 0 232px;background:var(--ink);color:#c7d3e3;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#2b4a6e transparent
}
.side .brand{display:flex;gap:10px;align-items:center;padding:16px 16px 14px;border-bottom:1px solid rgba(255,255,255,.08);text-decoration:none}
.side .logo{width:32px;height:32px;border-radius:8px;background:var(--brass);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}
.side .brand-mark{display:block;color:#fff;font-size:1.02rem;font-weight:650;line-height:1.2}
.brand-sub{display:block;font-size:.72rem;color:#8ea2bb;margin-top:1px;line-height:1.25;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{padding:8px 10px 18px;flex:1}
.nav .i{width:17px;height:17px;flex:none;opacity:.85}
.nav a,.nav summary{
  display:flex;align-items:center;gap:10px;padding:6px 10px;margin:1px 0;border-radius:7px;color:#c7d3e3;font-size:.875rem;
  text-decoration:none;cursor:pointer;line-height:1.35;transition:background .12s,color .12s
}
.nav a:hover,.nav summary:hover{background:rgba(255,255,255,.07);color:#fff;text-decoration:none}
.nav a.on{background:#fff;color:var(--ink);font-weight:600}
.nav a.on .i{opacity:1;color:var(--brass)}
.nav a span,.nav summary span{flex:1;min-width:0}
.nav .badge{background:#ef4444;color:#fff;border-radius:10px;font-size:.68rem;padding:0 6px;line-height:1.5;font-weight:600}
.nav-label{font-size:.66rem;letter-spacing:.1em;color:#7189a6;padding:12px 10px 3px;text-transform:uppercase;font-weight:600}
.ng summary{list-style:none}
.ng summary::-webkit-details-marker{display:none}
.ng summary .i:last-child{width:14px;height:14px;transition:transform .15s;opacity:.6}
.ng[open] summary .i:last-child{transform:rotate(90deg)}
.ng-items{margin:1px 0 4px 18px;padding-left:9px;border-left:1px solid rgba(255,255,255,.1)}
.ng-items a{padding:5px 10px;font-size:.84rem}
.side-foot{padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:.72rem;color:#7189a6}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:10px 24px;display:flex;align-items:center;gap:12px;min-height:60px;position:sticky;top:0;z-index:20
}
.topbar h1{margin:0;font-size:1.15rem}
.topbar .spacer{flex:1}
.lang-sw{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.lang-sw a{padding:4px 10px;font-size:.78rem;color:var(--ink-soft);text-decoration:none}
.lang-sw a.on{background:var(--brass);color:#fff}
.tb-icon{position:relative;display:flex;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;align-items:center;justify-content:center;color:var(--ink-soft)}
.tb-icon .i{width:18px;height:18px}
.tb-icon b{position:absolute;top:-5px;right:-5px;background:#ef4444;color:#fff;font-size:.65rem;border-radius:9px;padding:0 5px;line-height:1.6}
.tb-user > button{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:8px;font:inherit}
.tb-user > button:hover{background:#f1f5f9}
.tb-user .av{width:34px;height:34px;border-radius:50%;background:var(--brass-soft);color:var(--brass);display:flex;align-items:center;justify-content:center;font-weight:700}
.who{font-size:.78rem;color:var(--ink-soft);text-align:left;line-height:1.25}
.who strong{display:block;color:#0f172a;font-size:.86rem}
.content{padding:20px 24px 60px;max-width:1320px;width:100%}

/* ---------- কার্ড ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px}
.card .pad,.pad{padding:18px 20px}
.card-head{padding:14px 20px;border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.card-head h2,.card-head h3{margin:0}
.card-head .spacer{flex:1}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- KPI ---------- */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.kpi .k-label{font-size:.78rem;color:var(--ink-soft);letter-spacing:.03em}
.kpi .k-value{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:1.42rem;font-weight:600;margin-top:4px;letter-spacing:-.02em}
.kpi .k-note{font-size:.76rem;color:var(--ink-soft);margin-top:2px}
.kpi.lead{background:var(--ink);border-color:var(--ink);color:#fff}
.kpi.lead .k-label,.kpi.lead .k-note{color:#9fb0c6}
.kpi.lead .k-value{color:#fff;font-size:1.9rem}

/* ইনভেস্টমেন্টের স্তরচিত্র — এই সিস্টেমের স্বাক্ষর */
.stack{display:flex;height:26px;border-radius:6px;overflow:hidden;border:1px solid var(--line);margin:6px 0 12px}
.stack span{display:block;height:100%}
.stack-key{display:flex;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--ink-soft)}
.stack-key i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px}
.s1{background:#132135}.s2{background:#3d5673}.s3{background:#9a6b16}.s4{background:#c9a25a}.s5{background:#b9c4d1}

/* ---------- টেবিল ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:9px 12px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
thead th{
  background:#f7f9fb;color:var(--ink-soft);font-weight:600;font-size:.78rem;
  letter-spacing:.04em;border-bottom:1px solid var(--line);position:sticky;top:0
}
tbody tr:hover{background:#fafbfd}
tfoot td{font-weight:600;border-top:2px solid var(--line);background:#f7f9fb}
.empty{padding:34px 20px;text-align:center;color:var(--ink-soft)}

/* ---------- ফর্ম ---------- */
label{display:block;margin-bottom:12px;font-size:.86rem;font-weight:500;color:var(--ink-2)}
input,select,textarea{
  width:100%;padding:8px 11px;margin-top:4px;border:1px solid var(--line);border-radius:7px;
  font-family:inherit;font-size:.93rem;background:#fff;color:var(--ink)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:-1px;border-color:var(--brass)}
input[type=number],input[type=date]{font-family:'IBM Plex Mono',monospace}
.row{display:grid;gap:14px}
.r2{grid-template-columns:repeat(2,1fr)}
.r3{grid-template-columns:repeat(3,1fr)}
.r4{grid-template-columns:repeat(4,1fr)}
.inline-form{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.inline-form label{margin-bottom:0}

.btn{
  display:inline-block;background:var(--brass);color:#fff;border:1px solid var(--brass);
  padding:8px 16px;border-radius:8px;font-family:inherit;font-size:.88rem;font-weight:500;
  cursor:pointer;transition:background .12s;line-height:1.4
}
.btn:hover{background:#1d4ed8;text-decoration:none;color:#fff}
.btn.block{width:100%;margin-top:6px}
.btn.ghost{background:#fff;color:#1e293b;border-color:var(--line)}
.btn.ghost:hover{background:#f4f6f9;color:var(--ink)}
.btn.small{padding:5px 11px;font-size:.8rem}
.btn.danger{background:var(--neg);border-color:var(--neg)}

.flash{padding:11px 15px;border-radius:8px;margin-bottom:14px;font-size:.9rem;border:1px solid}
.flash.ok{background:#eaf5f0;border-color:#b9dccb;color:#1c6b52}
.flash.err{background:#fbeceb;border-color:#eec4c0;color:var(--neg)}
.flash.warn{background:#fffbeb;border-color:#fde68a;color:#92400e}

.tag{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.74rem;background:var(--brass-soft);color:var(--brass);border:1px solid #c7d9fb}
.tag.grey{background:#f0f3f7;color:var(--ink-soft);border-color:var(--line)}

/* ---------- লগইন ---------- */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--ink);padding:20px}
.auth-card{background:#fff;border-radius:14px;padding:32px;width:100%;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.auth-card .brand{margin-bottom:20px;text-align:center}
.auth-card .brand-mark{font-size:1.7rem;font-weight:700;color:var(--ink)}
.auth-card .brand-sub{color:var(--ink-soft);letter-spacing:.08em;font-size:.72rem}

@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.g2{grid-template-columns:1fr}
  .r3,.r4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none;height:auto;position:static}
  .side .nav{display:block;padding:10px}
  .content,.topbar{padding-left:14px;padding-right:14px}
  .r2,.r3,.r4{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr}
}
@media print{
  .side,.topbar,.no-print,.btn{display:none!important}
  body{background:#fff}.card{box-shadow:none;border:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==========================================================
   সংস্করণ ২ — এইচআর, অনুমোদন, মোবাইল
   ========================================================== */
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:#c0392b;color:#fff;
  font-size:.72rem;line-height:18px;text-align:center;margin-left:4px}
.nav-toggle{display:none}
.tag.st-ok{background:#eaf5f0;color:var(--pos);border-color:#b9dccb}
.tag.st-warn{background:#fffbeb;color:#92400e;border-color:#fde68a}
.tag.st-bad{background:#fbeceb;color:var(--neg);border-color:#eec4c0}
.tag.st-grey{background:#f0f3f7;color:var(--ink-soft);border-color:var(--line)}

.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:16px}
.tabs a{padding:8px 14px;border-radius:7px 7px 0 0;color:var(--ink-soft);font-size:.9rem;text-decoration:none}
.tabs a.on{background:var(--surface);border:1px solid var(--line);border-bottom-color:var(--surface);
  margin-bottom:-1px;color:var(--ink);font-weight:600}

.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#e6ebf1;flex:0 0 38px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--ink-soft)}
.who-cell{display:flex;gap:10px;align-items:center}
.kpi.ok .k-value{color:var(--pos)} .kpi.bad .k-value{color:var(--neg)} .kpi.warn .k-value{color:var(--brass)}
.bar{height:8px;background:#e6ebf1;border-radius:4px;overflow:hidden;min-width:80px}
.bar span{display:block;height:100%;background:var(--pos)}
.bar.low span{background:var(--neg)} .bar.mid span{background:var(--brass)}
.chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:10px 0}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.72rem;color:var(--ink-soft)}
.chart .col i{display:block;width:100%;max-width:34px;background:var(--ink-2);border-radius:4px 4px 0 0}
.chart .col i.p{background:var(--pos)}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{padding:9px 20px;border-bottom:1px solid var(--line-soft);display:flex;gap:10px;align-items:center}
.list-plain li:last-child{border-bottom:none}
#map{height:520px;border-radius:0 0 var(--radius) var(--radius)}

/* মোবাইল হাজিরা অ্যাপ */
.m-body{background:var(--paper);min-height:100vh}
.m-top{background:var(--ink);color:#fff;padding:16px 18px 54px}
.m-top .m-name{font-weight:600;font-size:1.05rem}
.m-top .m-sub{font-size:.8rem;color:#9fb0c6}
.m-wrap{max-width:480px;margin:-40px auto 0;padding:0 14px 40px}
.m-clock{font-family:'IBM Plex Mono',monospace;font-size:2.2rem;font-weight:600;text-align:center;letter-spacing:-.02em}
.m-btn{display:block;width:100%;padding:18px;border-radius:12px;border:none;font-family:inherit;font-size:1.1rem;
  font-weight:600;color:#fff;background:var(--pos);cursor:pointer}
.m-btn.out{background:var(--neg)} .m-btn:disabled{opacity:.5}
.m-video{width:100%;border-radius:10px;background:#000;aspect-ratio:3/4;object-fit:cover}
.m-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem}

@media (max-width:760px){
  .nav-toggle{display:block;margin:0 10px 10px;padding:8px 12px;border-radius:7px;border:1px solid rgba(255,255,255,.2);
    background:transparent;color:#fff;font-family:inherit;width:calc(100% - 20px);text-align:left}
  .side .nav{display:none}
  body.nav-open .side .nav{display:flex}
  .side-foot{display:none} body.nav-open .side-foot{display:block}
}


/* ---------- 3.0 components ---------- */
.i{width:18px;height:18px;vertical-align:middle}
.rp-menu{position:relative}
.rp-menu > div{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:40;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 8px 24px rgba(15,42,71,.12);min-width:190px;padding:5px}
.rp-menu.open > div{display:block}
.rp-menu > div a,.rp-menu > div button{display:block;width:100%;text-align:left;padding:8px 12px;border:0;background:none;font:inherit;color:#1e293b;cursor:pointer;border-radius:6px;text-decoration:none}
.rp-menu > div a:hover,.rp-menu > div button:hover{background:#f1f5f9}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink-soft);cursor:pointer;font-size:1.05rem;text-decoration:none}
.icon-btn:hover{background:#f1f5f9;text-decoration:none}
.icon-btn.dis{opacity:.4;pointer-events:none}
.form-actions{display:flex;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid var(--line-soft)}
.ep-back{margin:-4px 0 12px;font-size:.9rem}

/* employee list */
.el-top{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.el-loc select{width:auto;min-width:200px}
.el-tabs{display:flex;gap:4px;border-bottom:2px solid var(--line);flex:1}
.el-tabs a{padding:8px 14px;color:var(--ink-soft);font-weight:500;margin-bottom:-2px;border-bottom:2px solid transparent;text-decoration:none}
.el-tabs a.on{color:var(--brass);border-bottom-color:var(--brass)}
.el-card{overflow:hidden}
.el-bar{display:flex;gap:10px;align-items:center;padding:14px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line-soft)}
.el-bar select{width:auto;margin:0}
.el-bar .el-status{border-color:#86efac}
.el-bar .spacer{flex:1}
.el-search{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff}
.el-search span{color:var(--ink-soft)}
.el-search input{border:0;margin:0;padding:8px 2px;width:220px;outline:none;box-shadow:none}
.el-chips{padding:8px 16px;font-size:.8rem;color:var(--ink-soft);display:flex;gap:6px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line-soft)}
.el-chips span{background:var(--brass-soft);color:var(--brass);border-radius:6px;padding:1px 8px}
.el-table thead th{background:#f1f6fd;color:#334155;font-size:.8rem;letter-spacing:0;text-transform:none;font-weight:600;padding:11px 14px;white-space:nowrap}
.el-table td{padding:10px 14px;vertical-align:middle;white-space:nowrap}
.el-table tbody tr{cursor:pointer}
.el-table tbody tr:hover{background:#f8fafc}
.th-sort{color:inherit;text-decoration:none}
.th-sort span{opacity:.35;font-size:.75rem}
.th-sort.on{color:var(--brass)}
.el-person{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none;min-width:210px}
.el-person:hover{text-decoration:none}
.el-person .ph{width:40px;height:40px;border-radius:50%;background:#e2e8f0 center/cover no-repeat;flex:none;position:relative;display:flex;align-items:center;justify-content:center;color:#64748b;font-weight:600}
.el-person .ph i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid #fff}
.el-person .ph i.off{background:#cbd5e1}
.el-person b{display:block;font-weight:600;color:#0f172a;line-height:1.25}
.el-person small{display:block;color:var(--ink-soft);font-size:.75rem;line-height:1.3}
.el-foot{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.el-foot .spacer{flex:1}

/* profile */
.pf-head{display:flex;gap:18px;align-items:center;padding:20px}
.pf-head .ph{width:84px;height:84px;border-radius:50%;background:#e2e8f0 center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:#64748b;font-weight:600;flex:none}
.pf-head h2{margin:0;font-size:1.25rem}
.pf-tabs{display:flex;gap:4px;padding:0 16px;border-top:1px solid var(--line-soft);overflow-x:auto}
.pf-tabs a{padding:10px 14px;color:var(--ink-soft);border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none;font-weight:500}
.pf-tabs a.on{color:var(--brass);border-bottom-color:var(--brass)}
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 24px;padding:16px 20px}
.kv div{padding:8px 0;border-bottom:1px solid var(--line-soft)}
.kv small{display:block;color:var(--ink-soft);font-size:.75rem}

/* licence plans */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:16px 0}
.plan{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;display:flex;flex-direction:column;gap:8px}
.plan.best{border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft)}
.plan .price{font-size:1.6rem;font-weight:700;color:#0f172a}
.plan .price small{font-size:.85rem;color:var(--ink-soft);font-weight:400}
.plan ul{margin:4px 0 8px;padding-left:18px;color:#475569;font-size:.9rem}
.plan .btn{margin-top:auto;text-align:center}

@media(max-width:900px){
  .side{width:100%;flex:none;height:auto;position:static}
  .shell{flex-direction:column}
  .topbar{position:static}
  .who{display:none}
  .el-search input{width:140px}
}
.el-table td.loc{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis;font-size:.88rem}
/* employee list — selection + bulk actions */
.el-table th.el-ck,.el-table td.el-ck{width:38px;padding-left:16px;padding-right:0}
.el-table td.el-ck input,.el-table th.el-ck input{width:16px;height:16px;cursor:pointer;accent-color:var(--brass)}
.el-table tbody tr.sel td{background:#eff6ff}
.el-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;background:#f8fafc;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.el-actions .btn.dis{opacity:.45;pointer-events:none}
.el-actions .btn.ea-del{color:#b91c1c}
.el-actions .btn.ea-del:hover{background:#fef2f2;border-color:#fecaca}
.el-actions #ea-count{color:var(--brass);font-weight:600}
.el-actions #ea-clear{color:var(--brass);text-decoration:none;font-size:1.05rem;margin-left:4px}
.el-actions[hidden],.el-actions [hidden]{display:none!important}
/* last days of the free trial */
.trial-end{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:14px 18px;margin-bottom:16px;border-radius:10px;background:#b91c1c;color:#fff;box-shadow:0 4px 14px rgba(185,28,28,.25)}
.trial-end .btn{background:#fff;color:#b91c1c;border-color:#fff;font-weight:600}