@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
:root{--bg:#f3f4f6;--card:#fff;--ink:#0b1220;--muted:#5b6678;--line:#e5e7eb;--brand:#004767;--brand-d:#004767;--brand-soft:#e6f9fa;
--red:#e11d2e;--red-bg:#fdeeee;--amb:#d97706;--amb-bg:#fff3e6;--grn:#0f9d46;--grn-bg:#e8f8ee;--vio:#9333ea;--vio-bg:#f5ecff;--cyan:#0891b2;--cyan-bg:#e6f9fd;
--side:260px;--radius:20px;--shadow:0 1px 2px #0b12200a,0 4px 14px #0b122008}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font:14px/1.5 "Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:34px;line-height:1.15;margin:0 0 6px;font-weight:800;letter-spacing:-.02em}h2{font-size:22px;margin:0;font-weight:800;letter-spacing:-.01em}h3{font-size:15px;margin:0;font-weight:700}
.muted{color:var(--muted)}.small{font-size:13px}code{background:#eef2f6;padding:1px 6px;border-radius:6px;font-size:12px}
svg.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh;transition:none!important}
.shell.collapsed{grid-template-columns:78px 1fr}
.top{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:0 12px 12px;overflow:hidden;z-index:30}
.side-head{display:flex;align-items:center;justify-content:space-between;height:73px;border-bottom:1px solid var(--line);margin:0 -12px 16px;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
.brand:hover{text-decoration:none}.brand span{color:var(--brand)}
.brand .logo-mark{width:36px;height:36px;border-radius:11px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:19px;flex-shrink:0}
.icon-btn{background:none;border:0;color:var(--ink);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center}.icon-btn:hover{background:#f1f5f9}
.side-nav{display:flex;flex-direction:column;gap:6px;flex:1;overflow:auto}
.side-nav a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;color:#1f2937;font-weight:500;white-space:nowrap}
.side-nav a:hover{background:#f3f6fb;text-decoration:none}
.side-nav a.active{background:var(--brand);color:#fff;font-weight:700;box-shadow:0 6px 16px #00476740}
.side-user{border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fafbfc;margin-top:12px}
.side-user b{display:block;font-size:14px}.side-user small{color:var(--muted);font-size:12px}
.side-user .out{color:var(--red)}
.side-foot{text-align:center;color:#8b95a5;font-size:11px;margin-top:12px;white-space:nowrap}
.collapsed .side-nav a span,.collapsed .brand .bt,.collapsed .side-user>div,.collapsed .side-foot{display:none}
.collapsed .side-nav a{justify-content:center;padding:12px}.collapsed .side-head{justify-content:center;padding:0}.collapsed .brand{display:none}
.collapsed .side-user{justify-content:center;padding:10px 6px}
.main{padding:24px 24px 40px;min-width:0}
.panel{background:#fff;border-radius:24px;padding:28px 22px 30px;box-shadow:var(--shadow);min-height:calc(100vh - 48px)}
.mob-bar{display:none}
.scrim{display:none}

/* ---------- page head ---------- */
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.page-head p{margin:0}
.head-r{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;font-weight:500;box-shadow:var(--shadow)}

/* ---------- buttons / forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;border:0;border-radius:14px;padding:12px 20px;font:700 14px inherit;font-family:inherit;cursor:pointer;box-shadow:0 6px 14px #00476733}
.btn:hover{background:var(--brand-d);text-decoration:none}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line);box-shadow:none}.btn.ghost:hover{background:var(--brand-soft)}
.btn.danger{background:var(--red);box-shadow:none}.btn.sm{padding:8px 14px;font-size:13px;border-radius:11px}.btn.block{width:100%;margin-top:6px}
.link{background:none;border:0;color:var(--brand);cursor:pointer;font:inherit;padding:0;font-weight:600}.link.danger{color:var(--red)}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:14px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:3px solid #00476722;border-color:var(--brand)}
label{display:block;font-weight:600;font-size:13px;margin-bottom:14px;color:#334155}label input,label select,label textarea{margin-top:6px;font-weight:400}
.alert{background:var(--red-bg);color:var(--red);padding:11px 14px;border-radius:12px;margin-bottom:14px}
.ok{background:var(--grn-bg);color:var(--grn);padding:11px 14px;border-radius:12px;margin-bottom:14px}
.filters{display:flex;gap:12px;margin-bottom:22px;align-items:center;flex-wrap:wrap}.filters select{width:auto;min-width:200px;border-radius:14px;box-shadow:var(--shadow)}

/* ---------- stat cards ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;position:relative;min-height:118px}
.stat small{color:var(--muted);font-size:14px;font-weight:500}
.stat b{font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.02em}
.stat .ic{position:absolute;right:18px;top:18px;width:56px;height:56px;border-radius:16px;display:grid;place-items:center}
.stat .ic svg{width:24px;height:24px}
.t-blue .ic{background:var(--brand-soft);color:var(--brand)}.t-green .ic{background:var(--grn-bg);color:var(--grn)}.t-orange .ic{background:var(--amb-bg);color:var(--amb)}
.t-red .ic{background:var(--red-bg);color:var(--red)}.t-purple .ic{background:var(--vio-bg);color:var(--vio)}.t-cyan .ic{background:var(--cyan-bg);color:var(--cyan)}
.t-blue b{color:var(--brand)}.t-red b{color:var(--red)}.t-orange b{color:var(--amb)}.t-green b{color:var(--grn)}.t-cyan b{color:var(--cyan)}
.stat.hero{background:#06a64a;border:0;color:#fff;box-shadow:0 12px 26px #06a64a44}
.stat.hero small,.stat.hero b{color:#fff}.stat.hero .ic{background:#ffffff33;color:#fff}.stat.hero .sub{margin-top:auto}
.hero-sub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.hero-sub div{background:#ffffff26;border-radius:14px;padding:10px 12px}.hero-sub small{font-size:12px;color:#fff;display:block}.hero-sub b{font-size:22px}
.s-row2{align-items:stretch}

/* ---------- section cards ---------- */
.section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-top:18px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.sec-head p{margin:2px 0 0;color:var(--muted);font-size:14px}
.sec-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex-shrink:0}
.sec-ic.t-blue{background:var(--brand-soft);color:var(--brand)}.sec-ic.t-green{background:var(--grn-bg);color:var(--grn)}.sec-ic.t-orange{background:var(--amb-bg);color:var(--amb)}.sec-ic.t-purple{background:var(--vio-bg);color:var(--vio)}.sec-ic.t-cyan{background:var(--cyan-bg);color:var(--cyan)}
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
.roles .section{margin-top:0}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);margin-bottom:18px}
.form-card h2{margin-bottom:14px}
.role-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.b{font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}
.b-incomplete{background:var(--red-bg);color:var(--red)}.b-working{background:var(--amb-bg);color:var(--amb)}.b-done{background:var(--grn-bg);color:var(--grn)}

/* ---------- tasks ---------- */
.task{border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin-top:12px;background:#fafbfc}
.t-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.desc{margin:6px 0 0;color:#334155;font-size:14px;word-break:break-word}
.t-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:13px}
.t-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--muted);flex-wrap:wrap;gap:6px}
.acts{display:flex;gap:14px;align-items:center;font-size:13px}.acts form{margin:0}
.who-chip{background:var(--brand-soft);color:var(--brand);padding:3px 11px;border-radius:99px;font-weight:600;display:inline-flex;gap:5px;align-items:center}
.pr{padding:3px 11px;border-radius:99px;font-weight:700;font-size:12px}
.pr-low{background:#eef1f5;color:#475569}.pr-medium{background:var(--brand-soft);color:var(--brand)}.pr-high{background:var(--red-bg);color:var(--red)}
.due{color:var(--muted);display:inline-flex;gap:5px;align-items:center}.due svg{width:14px;height:14px}.due.over{color:var(--red);font-weight:700}
select.st{width:auto;min-width:126px;font-weight:700;padding:8px 12px;border-radius:99px;cursor:pointer;flex-shrink:0}
select.st-incomplete{background:var(--red-bg);color:var(--red);border-color:#f8c4c8}
select.st-working{background:var(--amb-bg);color:var(--amb);border-color:#fcd9ae}
select.st-done{background:var(--grn-bg);color:var(--grn);border-color:#b5e8c8}
select.st.saving{opacity:.55}
.task-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:0 16px;align-items:start}
.empty{color:#8b95a5;text-align:center;padding:26px 14px}.empty.big{background:#fff;border:1px dashed #cbd5e1;border-radius:var(--radius);padding:50px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px}
.actions{display:flex;gap:10px;margin-top:6px}
.member{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.member.off{opacity:.55}.m-acts{display:flex;gap:8px;flex-wrap:wrap}.inline{display:flex;gap:6px;margin:0}.inline input{width:150px;padding:8px 12px;border-radius:11px}

/* ---------- login / portal ---------- */
body.auth{display:grid;place-items:center;min-height:100vh;padding:20px;background:var(--bg)}
.login-box,.portal{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;text-align:center;box-shadow:0 20px 50px #0b122012}
.login-box form{text-align:left;margin-top:18px}
.logo{width:60px;height:60px;border-radius:18px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:30px;margin:0 auto 14px;box-shadow:0 10px 22px #00476740}
.login-box h1,.portal h1{font-size:26px}
.portal{max-width:620px}.grid-login{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.card-login{display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);border-radius:18px;padding:20px;color:var(--ink);background:#fafbfc}
.card-login span{font-size:30px}.card-login small{color:var(--muted)}.card-login:hover{border-color:var(--brand);text-decoration:none;background:var(--brand-soft)}
.card-login.admin{grid-column:1/-1;background:var(--brand);color:#fff;border:0;box-shadow:0 10px 24px #00476740}.card-login.admin small{color:#bfeff2}.card-login.admin:hover{background:var(--brand-d)}

#toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:99}
#toast.show{opacity:1;transform:none}#toast.err{background:var(--red)}

/* modal */
.modal-bg{position:fixed;inset:0;background:#0b122080;backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;padding:16px;z-index:60}
.modal-bg.open{display:flex}.modal{background:#fff;border-radius:24px;padding:26px;width:100%;max-width:640px;max-height:92vh;overflow:auto;box-shadow:0 30px 70px #0b122040}
.modal h2{margin-bottom:16px}
[hidden]{display:none!important}

/* ---------- responsive ---------- */
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.roles{grid-template-columns:1fr}}
@media(max-width:860px){
  .shell,.shell.collapsed{grid-template-columns:1fr}
  .top{position:fixed;left:0;top:0;width:270px;transform:translateX(-102%);transition:transform .25s;box-shadow:0 0 40px #0b122030}
  .shell.collapsed .side-nav a span,.shell.collapsed .brand .bt,.shell.collapsed .side-user>div,.shell.collapsed .side-foot{display:revert}
  .shell.collapsed .brand{display:flex}.shell.collapsed .side-nav a{justify-content:flex-start;padding:12px 16px}.shell.collapsed .side-head{justify-content:space-between;padding:0 20px}
  .shell.menu-open .top{transform:none}.shell.menu-open .scrim{display:block;position:fixed;inset:0;background:#0b122066;z-index:25}
  .mob-bar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
  .main{padding:14px 12px 30px}.panel{padding:20px 14px;border-radius:20px}
  h1{font-size:27px}
}
@media(max-width:520px){.stats{grid-template-columns:1fr 1fr;gap:12px}.stat{padding:16px;min-height:104px}.stat .ic{width:44px;height:44px;right:12px;top:12px}.stat b{font-size:28px}.task-list{grid-template-columns:1fr}.grid-login{grid-template-columns:1fr}}
.brand{font-size:16.5px}.stat.hero>small:first-child{padding-right:62px}
@media(max-width:520px){.stat.hero>small:first-child{padding-right:50px;font-size:13px}.filters select{width:100%;min-width:0}.head-r{width:100%}}

/* ---------- new: forms / tables / sales ---------- */
.inline-row{align-items:end}.inline-row .row-btn{margin:0 0 14px}
.sec-r{display:flex;align-items:center;gap:14px}
.f-h{margin:6px 0 10px;color:var(--brand);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.tbl{width:100%;border-collapse:collapse;min-width:820px}
.tbl th{background:#f8fafc;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr:last-child td{border-bottom:0}.tbl tbody tr:hover{background:#fafcff}
.tbl .num{text-align:right;white-space:nowrap}
.acts-cell{white-space:nowrap}.acts-cell>*{margin-left:12px}.acts-cell a{font-weight:600}
input[type=search]{border-radius:14px;box-shadow:var(--shadow)}

/* ---------- proforma invoice ---------- */
.inv-layout{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:22px;align-items:start}
.inv-form{margin:0;position:sticky;top:16px}
.item-row{border:1px solid var(--line);border-radius:14px;padding:12px 14px 2px;margin-bottom:12px;background:#fafbfc}
.item-head{display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px}
.inv-preview-wrap{min-width:0;background:#e9edf3;border-radius:var(--radius);padding:14px;overflow:hidden}
.inv-preview{--z:.7;zoom:var(--z)}
.sheet{width:210mm;min-height:297mm;background:#fff;padding:11mm 13mm 14mm;box-shadow:0 6px 24px #0b122026;font-family:Arial,Helvetica,"Segoe UI",sans-serif;font-size:13.4px;line-height:1.45;color:#111;margin:0 auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.inv-top{display:flex;justify-content:space-between;align-items:flex-end}
.inv-logo{width:64mm;height:auto;display:block}
.inv-title{font-size:20px;font-weight:700;margin-bottom:4mm;letter-spacing:.1px}
.inv-rule{border-top:1px solid #888;margin:9mm 0 4mm}
.inv-meta{display:flex;justify-content:space-between;margin-bottom:5mm}
.inv-t{width:100%;border-collapse:collapse;table-layout:fixed}
.inv-t th,.inv-t td{border:1.5px solid #fff;padding:6px 8px;text-align:left;vertical-align:top;word-wrap:break-word}
.inv-t th{background:#004767;color:#fff;font-size:14px;padding:7px 8px}
.inv-t td{background:#c8d9f7}
.inv-two td{padding:8px;line-height:1.5;height:25mm}
.inv-items .c-sr{width:7.8%;text-align:center}.inv-items .c-pr{width:16.4%}
.inv-items th.c-sr{text-align:left}
.inv-items td.c-sr{text-align:center}
.inv-items tr.it td{height:24mm;padding-top:9px}
.inv-tot td.w{width:63.7%;padding:10px 12px}.inv-tot .tl{width:19.8%}.inv-tot .tv{width:16.5%}
.inv-tot td{padding:8px}.inv-tot tr.pay td{background:#8fe3e8}.inv-tot td.w div{margin-top:5px}
.inv-terms{margin-top:8mm}.inv-terms p{margin:6px 0 0}
.inv-prep{text-align:right;margin-top:20mm;padding-right:8mm}

@media(max-width:1250px){.inv-layout{grid-template-columns:1fr}.inv-form{position:static}}

/* ---------- print: sirf invoice ---------- */
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff!important}
  body.inv-page .top,body.inv-page .mob-bar,body.inv-page .page-head,body.inv-page .inv-form,body.inv-page #toast,body.inv-page .scrim{display:none!important}
  body.inv-page .shell{display:block}
  body.inv-page .main,body.inv-page .panel{padding:0;margin:0;box-shadow:none;border-radius:0;min-height:0;background:#fff}
  body.inv-page .inv-layout{display:block}
  body.inv-page .inv-preview-wrap{padding:0;background:#fff;border-radius:0;overflow:visible}
  body.inv-page .inv-preview{zoom:1!important}
  body.inv-page .sheet{box-shadow:none;margin:0;width:210mm;min-height:0;height:296mm;overflow:hidden;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.inv-logo{width:70mm}
.inv-items th.c-sr,.inv-items td.c-sr{white-space:nowrap;padding-left:3px;padding-right:3px}
.inv-items .c-sr{width:9%}
.inv-two th:first-child,.inv-two td:first-child{width:48%}.inv-two th:last-child,.inv-two td:last-child{width:52%}
.stats.money .stat b{font-size:26px;margin-top:4px}
.tbl .b{white-space:nowrap;display:inline-block}.tbl td:first-child{white-space:nowrap}

/* ---- invoice: tabs + sticky preview ---- */
@media(min-width:1251px){.inv-layout{grid-template-columns:minmax(320px,400px) 1fr}}
.inv-form{position:static;padding:18px}
.inv-form h2{margin-bottom:10px}
.inv-tabs{display:flex;gap:6px;margin:6px 0 16px;background:#eef2f8;border-radius:12px;padding:4px}
.inv-tabs button{flex:1;border:0;background:transparent;font:inherit;font-size:13px;font-weight:600;color:#5b6b85;padding:9px 6px;border-radius:9px;cursor:pointer;white-space:nowrap}
.inv-tabs button.on{background:#fff;color:#004767;box-shadow:0 1px 4px #0b122022}
.inv-tabs .badge{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:#004767;color:#fff;font-size:11px;line-height:18px;margin-left:2px}
.inv-pane{display:none}.inv-pane.on{display:block}
.pane-next{margin-top:6px;float:right}
.inv-pane::after{content:"";display:block;clear:both}
.item-row{background:#f8fafd;border:1px solid var(--line);border-radius:12px;padding:10px 12px 2px;margin-bottom:10px}
.item-row .item-head{margin-bottom:4px}
.item-grid{display:grid;grid-template-columns:1fr 120px;gap:0 10px}
.svc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 8px}
.svc-total{font-size:14px;color:#5b6b85}.svc-total b{color:#004767;font-size:16px}
.inv-pane[data-pane=services] #items{max-height:calc(100vh - 330px);min-height:120px;overflow:auto;padding-right:2px}
@media(min-width:1251px){.inv-preview-wrap{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}}
@media(max-width:520px){.item-grid{grid-template-columns:1fr}}
@media print{body.inv-page .inv-tabs{display:none!important}}
.inv-form .row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* ---------- Staff + Roles & Permissions ---------- */
.staff-tbl{min-width:760px}.staff-tbl td{vertical-align:middle}.staff-tbl tr.off{opacity:.55}
.tbl-foot{margin:14px 4px 0;font-size:14px}.tbl-foot b{color:var(--ink)}
.rb{display:inline-block;font-size:12px;font-weight:700;padding:3px 12px;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.rb-admin{background:var(--grn-bg);color:var(--grn);border-color:#b5e8c8}
.rb-0{background:#e3edff;color:#004767;border-color:#c5d8ff}.rb-1{background:#fff7d6;color:#a16207;border-color:#f6e08a}
.rb-2{background:var(--vio-bg);color:var(--vio);border-color:#e3cdfb}.rb-3{background:var(--cyan-bg);color:var(--cyan);border-color:#b8eaf4}
.roles-tbl{min-width:860px}.roles-tbl th.c,.roles-tbl td.c{text-align:center}.roles-tbl td{vertical-align:middle;padding:16px 14px}
.roles-tbl td:first-child{white-space:normal;min-width:190px}
.role-cell{display:flex;align-items:center;gap:14px}.role-ic{width:46px;height:46px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:6px 8px}.chip{background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:500;padding:3px 12px;border-radius:99px;white-space:nowrap}
.tot{display:inline-block;min-width:34px;padding:3px 10px;border-radius:99px;background:var(--grn-bg);color:var(--grn);font-weight:700;font-size:13px}.tot.zero{background:#eef1f5;color:#64748b}
.ab{display:inline-flex;gap:10px}.acts-cell .ab>*{margin-left:0}
.sq{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;cursor:pointer;background:#fff;border:1.5px solid}
.sq.edit{color:var(--amb);border-color:#f3d28a;background:#fffbea}.sq.del{color:var(--red);border-color:#f5b5ba;background:var(--red-bg)}.sq:hover{filter:brightness(.96)}
.perm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pg{border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:10px;background:#fafbfc}
.pg-h{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:4px}
.pg-b{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 12px}
label.pk{display:flex;align-items:center;gap:9px;margin:6px 0;font-weight:500;cursor:pointer}label.pk input{width:auto;margin:0}

/* ---------- Projects ---------- */
.proj-tbl{min-width:900px}.proj-tbl td{vertical-align:middle}.proj-tbl td:first-child{white-space:normal;min-width:200px}
.ps{display:inline-block;font-size:12px;font-weight:700;padding:3px 12px;border-radius:99px;white-space:nowrap}
.ps-not_started{background:#eef1f5;color:#475569}.ps-in_progress{background:var(--amb-bg);color:var(--amb)}.ps-on_hold{background:var(--vio-bg);color:var(--vio)}.ps-completed{background:var(--grn-bg);color:var(--grn)}
.pbar{height:8px;background:#e8edf5;border-radius:99px;overflow:hidden;min-width:110px;margin-bottom:4px}.pbar i{display:block;height:100%;background:var(--grn);border-radius:99px}
.mem-box{margin-bottom:12px}
.proj-chip{background:var(--vio-bg);color:var(--vio);padding:3px 11px;border-radius:99px;font-weight:600;display:inline-flex;gap:5px;align-items:center;font-size:12px}.proj-chip svg{width:14px;height:14px}

/* ---------- Tax Invoice + Quotation (live preview + print) ---------- */
label.chk{display:flex;align-items:center;gap:9px;font-weight:600;margin-bottom:14px}label.chk input{width:auto;margin:0}
body.doc-page .sheet.doc{padding:0;position:relative}
.doc .d-head{padding:11mm 13mm 0}
.d-flow{width:100%;border-collapse:collapse}.d-flow>thead>tr>td,.d-flow>tfoot>tr>td,.d-flow>tbody>tr>td{padding:0;border:0;background:none}
.doc .d-body{padding:0 13mm 6mm;vertical-align:top}
.d-sp-h,.d-sp-f{height:0}
.doc .d-foot{padding:0 13mm 8mm}.doc .d-foot-in{border-top:1px solid #888;text-align:center;padding-top:3mm;line-height:1.5;font-size:14px}
/* Tax Invoice */
.tx-title{font-size:25px;margin-bottom:5mm}.doc .tx-logo,.doc .inv-logo{width:62mm}
.tx-meta{margin-top:5mm}
.tx-two th:first-child,.tx-two td:first-child{width:46%}.tx-two th:last-child,.tx-two td:last-child{width:54%}
.tx-two td{height:auto;padding:9px 10px;line-height:1.6}.tx-two .nm{font-size:16px}.tx-two .up{text-transform:uppercase}
.tx-two tr.pos td{padding:8px 10px}
.tx-items{height:46mm}.tx-items td{padding:8px 10px}.tx-items tr.fill{height:100%}.tx-items tr.fill td{padding:0}.tx-items td.c-sr{text-align:center}
.tx-items tr.it{break-inside:avoid}
.tx-bottom{break-inside:avoid}.tx-bottom th,.tx-bottom td{padding:9px 10px}
.tx-bottom td.w{vertical-align:top;padding:12mm 8mm 8px 12mm}.tx-bottom td.w div{margin-top:12px}
.tx-bottom th.cy{background:#03bfcb;color:#fff;text-align:center}.tx-bottom tr.st td{background:#8fe3e8}
.tx-foot{display:flex;justify-content:space-between;gap:10mm;margin-top:9mm;break-inside:avoid}
.tx-terms{flex:1}.tx-terms ul{margin:8px 0 0;padding-left:22px;list-style:disc}.tx-terms li{margin-bottom:2px}
.tx-sign{width:72mm;text-align:center}.tx-sign .sig{height:21mm;display:flex;align-items:center;justify-content:center}.tx-sign .sig img{height:18mm;width:auto}
.tx-sign .sig-line{border-top:1px solid #888;margin-bottom:6px}
.tx-copy{border-top:1px solid #888;margin-top:12mm;padding-top:3mm;text-align:center;break-inside:avoid}
/* Quotation */
.q-top{display:flex;justify-content:space-between;align-items:center}.q-logo{width:52mm;height:auto;display:block}
.q-co{text-align:center;line-height:1.5;font-size:13.4px}
.q-meta{margin-top:5mm;margin-bottom:2mm}
.q-title{text-align:center;font-weight:700;font-size:20px;margin:0 0 8mm}
.q-to{margin-bottom:9mm;line-height:1.55}.q-dear p{margin:8px 0 6mm}
.q-items .it td{padding:9px 10px;height:auto}.q-items .it{break-inside:avoid}.q-items td.c-sr{text-align:center}.q-items td.amt{vertical-align:middle;font-weight:400}.q-items th,.q-items td.c-sr{white-space:nowrap}
.q-items .it td div{margin-top:3px}.q-items tr.cl td{padding:4px 10px 10px}
.q-items tr.gt td{background:#8fe3e8}.q-items tr.gt,.q-items tr.g{break-inside:avoid}
.q-trust{text-align:center;font-style:italic;font-weight:700;margin:9mm 0 5mm}
.q-sign{width:62mm;margin-left:auto;text-align:center;break-inside:avoid}.q-sign svg{margin:0 auto}.q-sign .bc-img{display:block;margin:0 auto 2px;max-width:52mm;max-height:18mm;width:auto;height:auto}
.bc-prev{display:flex;align-items:center;gap:14px;margin:-4px 0 14px;padding:8px 12px;border:1px dashed var(--line);border-radius:12px;background:#fafbfc}.bc-prev img{max-height:44px;max-width:160px;object-fit:contain}.q-sign .ref{font-size:13px}
.q-notes{margin-top:8mm;break-inside:avoid}.q-notes ol{margin:8px 0 0;padding-left:24px}
.q-review{text-align:center;color:#e11d1d;font-weight:700;font-style:italic;margin:13mm 0 8mm}
.q-h{text-align:center;font-family:"Times New Roman",Times,serif;font-weight:700;font-size:15px;color:#004767;margin:6mm 0 5mm}
.q-j{text-align:justify;margin:0}.q-sec{margin-top:13px;break-inside:avoid}.q-sec p{margin-top:2px}
.q-ci{margin:0 0 15px}.q-confirm{margin:14mm 0 0}.q-thanks{text-align:right;margin:15mm 0 0;padding-right:6mm}
/* print: header/footer har page par repeat */
@media print{
  body.doc-page .sheet.doc{min-height:0!important;height:auto!important;overflow:visible!important;box-shadow:none;margin:0;width:210mm}
  body.doc-page .doc .d-head{position:fixed;top:0;left:0;right:0;height:var(--hh);background:#fff;z-index:2;box-sizing:border-box}
  body.doc-page .doc .d-foot{position:fixed;bottom:0;left:0;right:0;height:var(--fh);background:#fff;z-index:2;box-sizing:border-box}
  body.doc-page .d-sp-h{height:var(--hh)}body.doc-page .d-sp-f{height:var(--fh)}
}

/* ---------- CRM extension modules ---------- */
.module-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.module-form-grid label{display:flex;flex-direction:column;gap:6px;font-weight:650;color:var(--ink)}.module-form-grid label.wide{grid-column:1/-1}.module-form-grid input,.module-form-grid select,.module-form-grid textarea{width:100%;min-width:0;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;background:#fff;color:var(--ink)}
.module-table{width:100%;border-collapse:collapse;min-width:940px}.module-table th,.module-table td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}.module-table th{background:#f8fafc;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.module-table td small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.module-table tr:hover td{background:#fbfcff}.module-status{display:inline-flex;border-radius:99px;padding:4px 10px;font-size:12px;font-weight:700;background:#eef2f7;color:#475569;white-space:nowrap}.s-active,.s-paid,.s-won,.s-resolved,.s-completed,.s-approved{background:var(--grn-bg);color:var(--grn)}.s-overdue,.s-expired,.s-lost,.s-rejected,.s-cancelled{background:var(--red-bg);color:var(--red)}.s-in_progress,.s-contacted,.s-qualified,.s-renewal_due,.s-partially_paid{background:var(--amb-bg);color:var(--amb)}.s-open,.s-new,.s-scheduled,.s-submitted,.s-proposal_sent{background:var(--brand-soft);color:var(--brand)}.empty-state{background:#fff;border:1px dashed #cbd5e1;border-radius:16px;padding:38px 20px;text-align:center}.empty-state p{margin:6px 0 0}.filters input[type=search]{min-width:240px;flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:#fff}
@media(max-width:650px){.module-form-grid{grid-template-columns:1fr}.module-form-grid label.wide{grid-column:auto}.module-table{min-width:900px}}
.report-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}.report-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;min-width:0}.report-card h3{margin-bottom:14px}.report-table{min-width:0}.report-table th,.report-table td{padding:10px 8px}.report-line{display:flex;justify-content:space-between;gap:15px;padding:12px 2px;border-bottom:1px solid var(--line);text-transform:capitalize}.report-line:last-child{border-bottom:0}.t-violet{--tone:var(--vio);--tone-bg:var(--vio-bg)}@media(max-width:700px){.report-grid{grid-template-columns:1fr}}
.settings-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;max-width:900px}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.settings-grid label{display:flex;flex-direction:column;gap:6px;font-weight:650}.settings-grid input,.settings-grid select,.settings-grid textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;background:#fff}.settings-grid .wide{grid-column:1/-1}@media(max-width:650px){.settings-grid{grid-template-columns:1fr}.settings-grid .wide{grid-column:auto}.settings-card{padding:16px}}

/* ---------- Saved documents modal (Quotation / Tax Invoice / Proforma) ---------- */
.doc-modal{max-width:880px}
.doc-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.doc-modal-head h2{margin:0}
#dmSearch{width:100%;margin-bottom:12px}
.doc-list{min-width:0}.doc-list tr.pick{cursor:pointer}.doc-list td:first-child{white-space:normal}
.doc-list .acts-cell{white-space:nowrap}
@media print{#docModal{display:none!important}}

/* ---------- Leads: Gmail bar, actions, detail view ---------- */
.s-hold{background:var(--amb-bg);color:var(--amb)}.s-denied{background:var(--red-bg);color:var(--red)}.s-converted{background:var(--grn-bg);color:var(--grn)}
.act-wrap{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.act-wrap .btn.sm{white-space:nowrap}
select.lead-act{border:1px solid var(--line);border-radius:11px;padding:8px 10px;font:600 13px inherit;font-family:inherit;background:#fff;color:var(--ink);cursor:pointer}select.lead-act:disabled{opacity:.7;cursor:default;background:var(--grn-bg);color:var(--grn);border-color:transparent}
.mail-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--brand-soft);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:14px}.mail-bar small{display:block;color:var(--muted);margin-top:3px}.mail-bar.warn{background:var(--amb-bg)}.mail-bar .err-t{color:var(--red);font-weight:600}
.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}.detail-grid small,.detail-msg small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}.detail-grid b{font-weight:600;word-break:break-word}
.detail-msg{margin-top:18px}.detail-msg pre{white-space:pre-wrap;word-break:break-word;font:inherit;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:14px;max-height:300px;overflow:auto;margin:0}
@media(max-width:650px){.detail-grid{grid-template-columns:1fr}.mail-bar{flex-direction:column;align-items:flex-start}}
tr.hl td{background:#fff8d6!important;transition:background 1s}

/* ---------- Attendance ---------- */
.b-muted{background:#eef1f5;color:#475569}.b-info{background:var(--vio-bg);color:var(--vio)}
.att-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.att-grid .section{margin-top:0}
.att-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.att-clock{margin:16px 0;background:#004767;color:#fff;border-radius:18px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.att-clock small{display:block;color:#bfeff2;font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.att-clock b{font-size:34px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.att-clock .rt{text-align:right}.att-clock .rt b{font-size:24px}
.att-times{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.att-times div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fafbfc}
.att-times small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.att-times b{font-size:20px;font-weight:800}
.att-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.att-btn{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;font:700 15px inherit;font-family:inherit;cursor:pointer;color:var(--ink);transition:.15s}
.att-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow)}
.att-btn:disabled{opacity:.42;cursor:not-allowed}
.att-btn.in{background:var(--grn);border-color:var(--grn);color:#fff}
.att-btn.lunch{color:var(--amb);border-color:#f3d28a;background:#fffbea}.att-btn.short{color:var(--vio);border-color:#e3cdfb;background:var(--vio-bg)}
.att-btn.out{color:var(--red);border-color:#f5b5ba;background:var(--red-bg)}
.att-btn.active{box-shadow:0 0 0 3px #00476722;border-color:var(--brand)}
.att-note{margin:14px 0 0;color:var(--muted);font-size:13px}
.att-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.att-mini div{border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.att-mini small{display:block;color:var(--muted);font-size:12px}.att-mini b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:flex;justify-content:space-between;gap:12px;padding:11px 0 11px 22px;border-bottom:1px solid var(--line);position:relative}
.timeline li:last-child{border-bottom:0}
.timeline li::before{content:"";position:absolute;left:2px;top:17px;width:10px;height:10px;border-radius:50%;background:var(--brand)}
.timeline li.t-check_out::before{background:var(--red)}.timeline li.t-check_in::before{background:var(--grn)}
.timeline li.t-lunch_start::before,.timeline li.t-lunch_end::before{background:var(--amb)}.timeline li.t-short_start::before,.timeline li.t-short_end::before{background:var(--vio)}
.timeline b{font-weight:600}.timeline span{color:var(--muted);font-variant-numeric:tabular-nums}
.month-nav{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.month-nav b{min-width:130px;text-align:center}
.att-sum{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.att-sum div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:#fff}
.att-sum small{display:block;color:var(--muted);font-size:12px}.att-sum b{font-size:22px;font-weight:800}
.att-tbl{min-width:760px}.att-tbl td{vertical-align:middle;white-space:nowrap}.att-tbl tr.wo td{background:#fafbfc;color:var(--muted)}
.att-tbl .miss{color:var(--red);font-size:12px;font-weight:600}
.link.nm{font-weight:700;color:var(--ink);text-align:left}.link.nm:hover{color:var(--brand);text-decoration:underline}
tr.clk{cursor:pointer}
@media(max-width:1000px){.att-grid{grid-template-columns:1fr}}
@media(max-width:520px){.att-sum{grid-template-columns:1fr 1fr}.att-mini{gap:8px}.att-mini div{padding:10px}.att-mini b{font-size:15px}.att-clock b{font-size:28px}.att-clock .rt{text-align:left}.att-actions{gap:10px}.att-btn{padding:14px 8px;font-size:14px}}

/* ---------- Staff detail modal (tabs) ---------- */
.modal.wide{max-width:860px}
.tabs{display:flex;gap:6px;background:#eef2f8;border-radius:12px;padding:4px;margin:0 0 16px;overflow-x:auto}
.tabs button{flex:1;border:0;background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:#5b6b85;padding:10px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
.tabs button.on{background:#fff;color:var(--brand);box-shadow:0 1px 4px #0b122022}
.tab-pane{display:none}.tab-pane.on{display:block}
.modal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.modal-top h2{margin:0}
.new-role{display:flex;gap:8px;margin:-6px 0 14px;align-items:center}.new-role input{margin:0}
.lock-note{background:var(--grn-bg);color:var(--grn);padding:11px 14px;border-radius:12px;margin-bottom:12px;font-weight:600}
.pm-hint{margin:0 0 12px;color:var(--muted);font-size:13px}

/* ---------- Login / Portal / Setup (auth2) ---------- */
body.auth2{margin:0;background:#fff}
.auth-wrap{display:grid;grid-template-columns:minmax(380px,46%) 1fr;min-height:100vh}
.auth-side{position:relative;overflow:hidden;background:#004767;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:56px clamp(32px,5vw,72px) 220px}
.side-copy{position:relative;z-index:1;max-width:440px}
.auth-side h2{font-size:clamp(30px,3.2vw,42px);line-height:1.12;font-weight:800;letter-spacing:-.025em;margin:0 0 16px}
.auth-side p{margin:0 0 34px;color:#b0e3e8;font-size:16px;line-height:1.55;max-width:38ch}
.side-list{list-style:none;margin:0;padding:0;border-top:1px solid #ffffff26}
.side-list li{padding:15px 0;border-bottom:1px solid #ffffff26;display:flex;flex-direction:column;gap:2px}
.side-list b{font-weight:700;font-size:15px}.side-list span{color:#03bfcb;font-size:14px}
.waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:200px;display:block}
.auth-main{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:#fff}
.auth-card{width:100%;max-width:400px}
.auth-logo{display:block;width:190px;margin:0 0 30px -14px}.auth-logo img{display:block;width:100%;height:auto}
.auth-card h1{font-size:30px;margin:0 0 8px}
.auth-card .lead{margin:0 0 26px;font-size:15px;line-height:1.5}
.auth-card input{height:48px;padding:0 14px;border-radius:12px;border-color:#d5dbe6;font-size:15px}
.auth-card input::placeholder{color:#9aa5b8}
.auth-card input:focus-visible,.pw-t:focus-visible,.pick:focus-visible,.auth-alt a:focus-visible{outline:3px solid #00476740;outline-offset:2px}
.pw{display:block;position:relative;margin-top:6px}.pw input{margin-top:0;padding-right:70px}
.pw-t{position:absolute;right:6px;top:6px;height:36px;padding:0 12px;border:0;background:none;color:var(--brand);font:600 13px/1 inherit;font-family:inherit;cursor:pointer;border-radius:9px}
.pw-t:hover{background:var(--brand-soft)}
.auth-btn{height:50px;margin-top:8px;font-family:inherit;font-weight:700;font-size:15px;border-radius:12px;position:relative}
.auth-btn:disabled{cursor:progress;opacity:.85}
.auth-btn .spin{display:none;width:18px;height:18px;border:2.5px solid #ffffff66;border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.auth-btn.busy .spin{display:inline-block}.auth-btn.busy .lbl{display:none}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.auth-btn .spin{animation-duration:2s}}
.auth-alt{margin:22px 0 0;font-size:14px}.auth-alt a{font-weight:600}
.auth-foot{margin:40px 0 0;color:#8b95a5;font-size:12px}
.auth-card .alert{font-weight:500}
/* portal list */
.pick{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;color:var(--ink);margin-bottom:8px;background:#fff;transition:border-color .15s,background .15s}
.pick b{font-weight:700;font-size:15px}.pick small{display:block;color:var(--muted);font-size:13px;margin-top:1px}
.pick:hover{text-decoration:none;border-color:var(--brand);background:var(--brand-soft)}
.pick svg{color:var(--muted)}.pick:hover svg{color:var(--brand)}
.pick-admin{background:#004767;border-color:#004767;color:#fff;padding:16px 18px;margin-bottom:22px}
.pick-admin small,.pick-admin svg{color:#03bfcb}.pick-admin:hover{background:#004767;border-color:#004767}.pick-admin:hover svg{color:#fff}
.pick-h{font-size:14px;color:var(--muted);font-weight:600;margin:0 0 10px}
.pick-list{max-height:calc(100vh - 460px);min-height:120px;overflow:auto}
@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-main{align-items:flex-start;padding:32px 20px}
  .auth-logo{width:160px}.auth-card h1{font-size:26px}
  .pick-list{max-height:none}
}
.auth-side h2{text-wrap:balance;font-size:clamp(28px,3vw,38px)}
.auth-logo{width:270px;margin:-28px 0 6px -22px}
@media(max-width:900px){.auth-logo{width:220px;margin:-22px 0 4px -18px}}

.role-bar{margin-top:12px;max-width:260px}

/* ---------- Client Timesheet ---------- */
.ts-box{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ts-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ts-form{display:grid;grid-template-columns:150px 100px 150px minmax(160px,1fr) auto;gap:8px;margin-bottom:14px;align-items:center}
.ts-form input,.ts-form select{padding:10px 12px;border-radius:11px}
.ts-tbl{min-width:560px}.ts-tbl td{padding:10px 12px}
@media(max-width:760px){.ts-form{grid-template-columns:1fr 1fr}.ts-form input[name=title],.ts-form .btn{grid-column:1/-1}}

/* ================= Admin dashboard redesign (v2) ================= */
:root{--navy:#004767;--navy-2:#004767;--accent:#03bfcb;--bg:#eef1f7}
body{background:var(--bg)}
/* sidebar: dark navy */
.top{background:#004767;border-right:0;color:#cbd5e6}
.side-head{border-bottom:1px solid #ffffff14}
.brand{color:#fff}.brand span{color:var(--accent)}
.brand .logo-mark{background:#004767;box-shadow:0 6px 16px #00476755}
.icon-btn{color:#cbd5e6}.icon-btn:hover{background:#ffffff14}
.side-nav a{color:#b4c1d8;border-radius:12px;position:relative}
.side-nav a:hover{background:#ffffff12;color:#fff}
.side-nav a.active{background:#03bfcb;color:#fff;box-shadow:0 8px 20px #00476755}
.side-user{background:#ffffff0d;border-color:#ffffff1a;color:#fff}.side-user small{color:#93a4c0}
.side-foot{color:#6b7c99}
/* panel */
.panel{background:transparent;box-shadow:none;padding:0;border-radius:0}
/* hero header */
.dash-hero{background:#004767;color:#fff;border-radius:24px;padding:28px 30px;margin-bottom:22px;box-shadow:0 14px 34px #00476733;position:relative;overflow:hidden;align-items:center}
.dash-hero:after{content:"";position:absolute;right:-60px;top:-80px;width:280px;height:280px;border-radius:50%;background:#ffffff14}
.dash-hero h1{color:#fff;font-size:30px}.dash-hero p{color:#d6e2ff}
.dash-hero .head-r{position:relative;z-index:1}
.dash-hero .pill{background:#ffffff1f;border-color:#ffffff33;color:#fff;box-shadow:none;backdrop-filter:blur(6px)}
.dash-hero .btn{background:#fff;color:var(--navy);box-shadow:0 8px 18px #00476740}.dash-hero .btn:hover{background:#e6f9fa}
/* filters bar */
.filters{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow)}
.filters select{box-shadow:none;background:#f6f8fc;border-color:transparent}
/* stat cards */
.stat{border:0;border-radius:20px;padding:20px 22px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.stat:hover{transform:translateY(-3px);box-shadow:0 14px 28px #0b122014}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:currentColor;opacity:.9}
.stat.t-blue{color:var(--brand)}.stat.t-red{color:var(--red)}.stat.t-orange{color:var(--amb)}.stat.t-green{color:var(--grn)}.stat.t-purple{color:var(--vio)}.stat.t-cyan{color:var(--cyan)}
.stat.hero{color:#fff}.stat.hero:before{display:none}
.stat small{color:var(--muted)}
.stat .ic{border-radius:50%}
/* role sections */
.section{border:0;border-radius:22px}
.sec-head h2{font-size:20px}
.pbar.role-bar{height:7px;border-radius:99px;background:#e8edf5;overflow:hidden;margin-top:10px}
.pbar.role-bar i{display:block;height:100%;border-radius:99px;background:#03bfcb}
/* task cards with priority edge */
.task{background:#fff;border:1px solid var(--line);border-left:4px solid #cbd5e1;border-radius:14px;transition:box-shadow .15s}
.task:hover{box-shadow:0 8px 20px #0b12200f}
.task.prio-high{border-left-color:var(--red)}.task.prio-medium{border-left-color:var(--brand)}.task.prio-low{border-left-color:#94a3b8}
.t-top h3{font-size:15.5px}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.roles{grid-template-columns:1fr}}
@media(max-width:560px){.dash-hero{padding:20px;border-radius:20px}.dash-hero h1{font-size:24px}.stats{grid-template-columns:1fr 1fr;gap:12px}.stat b{font-size:28px}.stat .ic{width:42px;height:42px}}

/* =====================================================================
   WEB WHALE THEME v2  — brand: light #03bfcb + dark rgb(0, 71, 103)
   (logo se liye gaye colors; document/print sheets ko touch nahi kiya)
   ===================================================================== */
:root{--sky:#03bfcb;--sky-d:#03bfcb;--navy:#004767;--navy-d:#004767;--navy-x:#004767;
--brand:#004767;--brand-d:#004767;--brand-soft:#e6f9fa;--bg:#f1f8fa;--line:#dcebef;--ink:#0c1b33;--muted:#5d6f88;
--grad:#004767;--grad-soft:#e6f9fa;
--radius:18px;--shadow:0 1px 2px #00476708,0 8px 24px #00476712;--shadow-lg:0 18px 44px #00476722}
body{font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;background:var(--bg);
background-attachment:fixed}
h1,h2,h3,.brand,.stat b,.crm-tag{font-family:"Poppins","Inter",system-ui,sans-serif}
h1{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--navy-x)}h2{font-weight:700}
a{color:var(--sky-d)}

/* ---- sidebar ---- */
.top{background:#fff;border-right:1px solid var(--line);box-shadow:4px 0 28px #00476710;padding:0 14px 14px}
.side-head{height:78px;margin:0 -14px 10px;padding:0 18px;border-bottom:1px solid var(--line)}
.brand{gap:8px}.brand-logo{height:34px;width:auto;display:block}.logo-mark{display:none!important;width:40px;height:40px;border-radius:12px;background:var(--grad)!important;color:#fff;font:700 21px "Poppins",sans-serif;place-items:center;box-shadow:0 8px 18px #00476733}
.crm-tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#fff;background:var(--grad);padding:3px 8px;border-radius:99px;align-self:center;margin-top:2px}
.side-nav{gap:3px;padding:4px 2px;scrollbar-width:thin}
.nav-label{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8ea0b8;padding:16px 14px 6px}
.nav-label:first-child{padding-top:6px}
.side-nav a{position:relative;padding:11px 14px;border-radius:12px;color:#3a4d68;font-weight:500;transition:background .15s,color .15s}
.side-nav a svg{color:#7f93ad;transition:color .15s}
.side-nav a:hover{background:var(--brand-soft);color:var(--navy)}.side-nav a:hover svg{color:var(--sky-d)}
.side-nav a.active{background:#03bfcb;color:#fff;font-weight:600;box-shadow:0 8px 20px #00476738}.side-nav a.active svg{color:#fff}
.side-user{background:var(--grad-soft);border:1px solid #d5e5f3;border-radius:16px;justify-content:flex-start;gap:10px}
.side-user>div{flex:1;min-width:0}.side-user b,.side-user small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:700 13px "Poppins",sans-serif;flex-shrink:0;box-shadow:0 4px 10px #00476733}
.side-user .out{color:#d6293a}.side-user .out:hover{background:#fdeeee}
.side-foot{font-size:10.5px;color:#9aaabf;white-space:normal;line-height:1.4}
.collapsed .brand-logo,.collapsed .crm-tag,.collapsed .nav-label,.collapsed .avatar+div{display:none}
.collapsed .logo-mark{display:grid!important}.collapsed .brand{display:flex}.collapsed .side-head{flex-direction:column;height:auto;padding:14px 0 10px;gap:8px}
.collapsed .side-user{flex-direction:column;padding:10px 4px;gap:6px}.collapsed .side-nav a{padding:12px;justify-content:center}.collapsed .side-nav a:hover{transform:none}
.mob-logo{height:28px;width:auto}

/* ---- main shell ---- */
.main{padding:22px 26px 44px}
.panel{background:transparent;box-shadow:none;border-radius:0;padding:0;min-height:0}
.page-head{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 26px;box-shadow:var(--shadow);margin-bottom:20px;align-items:center;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:#03bfcb}
.page-head::after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;background:none;pointer-events:none}
.page-head>*{position:relative;z-index:1}.page-head h1{margin:0 0 2px}
.dash-hero{background:#004767;border:0;color:#fff;box-shadow:0 18px 40px #00476740;padding:28px 30px}
.dash-hero::before{display:none}.dash-hero::after{width:340px;height:340px;right:-80px;top:-120px;background:none}
.dash-hero h1{color:#fff;font-size:32px}.dash-hero p,.dash-hero .muted{color:#d3e6f6}
.dash-hero .pill{background:#ffffff1f;border:1px solid #ffffff33;color:#fff;box-shadow:none;backdrop-filter:blur(6px)}
.dash-hero .btn{background:#fff;color:var(--navy);box-shadow:0 8px 20px #00000026}.dash-hero .btn:hover{background:#e6f9fa}
.pill{border-radius:14px;color:var(--navy)}

/* ---- buttons / forms ---- */
.btn{background:var(--grad);border-radius:12px;box-shadow:0 8px 18px #00476735;transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{background:var(--grad);filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 12px 24px #00476740}
.btn:active{transform:none}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid #cfe0ee;box-shadow:none}.btn.ghost:hover{background:var(--brand-soft);filter:none;box-shadow:none}
.btn.danger{background:#e11d2e}
.link{color:var(--sky-d)}.link:hover{color:var(--navy)}.link.danger{color:#d6293a}
input,select,textarea{border:1px solid #d3e1ee;border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:#b6cfe4}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--sky);box-shadow:0 0 0 4px #03bfcb26}
.filters select,input[type=search]{box-shadow:var(--shadow);border-color:var(--line)}

/* ---- stat cards ---- */
.stats{gap:18px}
.stat{border:1px solid var(--line);border-radius:20px;padding:22px;transition:transform .18s,box-shadow .18s;overflow:hidden}
.stat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:#03bfcb;opacity:0;transition:opacity .18s}
.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}.stat:hover::after{opacity:1}
.stat small{font-weight:600;color:var(--muted);letter-spacing:.01em}
.stat b{font-size:36px;font-weight:700}
.stat .ic{border-radius:16px;width:54px;height:54px}
.t-blue .ic{background:#d4f4f6;color:var(--navy)}.t-blue b{color:var(--navy)}
.t-cyan .ic{background:#d4f4f6}
.stat.hero{background:var(--grad);box-shadow:0 16px 34px #00476740}
.hero-sub div{background:#ffffff24;backdrop-filter:blur(4px)}

/* ---- sections / tasks ---- */
.section,.form-card{border-radius:20px;border:1px solid var(--line);padding:24px}
.section h2{font-size:19px;color:var(--navy-x)}
.sec-ic.t-blue{background:#d4f4f6;color:var(--navy)}
.task{background:#fff;border:1px solid var(--line);border-left:4px solid #c7d6e6;border-radius:16px;padding:15px 17px;transition:box-shadow .15s,transform .15s,border-color .15s}
.task:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.task.prio-high{border-left-color:#e11d2e}.task.prio-medium{border-left-color:var(--sky)}.task.prio-low{border-left-color:#b6c4d6}
.who-chip,.chip,.pr-medium{background:var(--brand-soft);color:var(--navy)}
.pbar{background:#e3edf6}.pbar i{background:#03bfcb}.role-bar{margin-top:12px;height:7px}
.empty.big{border-color:#bcd3e6;background:#fff}
.b{letter-spacing:.01em}

/* ---- tables ---- */
.table-wrap{border-radius:18px;background:#fff;border:1px solid var(--line)}
.tbl th{background:#f2fcfd;color:var(--navy);font-weight:700;border-bottom:1px solid #d6e5f2}
.tbl td{border-bottom:1px solid #edf2f8}
.tbl tbody tr{transition:background .12s}.tbl tbody tr:hover{background:#f2fcfd}
.f-h{color:var(--sky-d)}
.inv-tabs{background:#e8f1f9}.inv-tabs button.on{color:var(--navy)}
.inv-tabs .badge{background:var(--grad)}
.inv-preview-wrap{background:#dde8f3;border-radius:18px}
.rb-0{background:#e3f1fb;color:#004767;border-color:#bfe0f4}
.role-ic{background:var(--grad-soft);color:var(--navy)}

/* ---- modal / toast ---- */
.modal-bg{background:#00476778;backdrop-filter:blur(4px)}
.modal{border-radius:24px;box-shadow:var(--shadow-lg);border-top:5px solid var(--sky);animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
#toast{background:var(--navy-x);border-left:4px solid var(--sky);border-radius:12px;box-shadow:var(--shadow-lg)}
#toast.err{background:#b4161f;border-left-color:#ff8a93}

/* ---- scrollbar ---- */
*{scrollbar-color:#b3d9e0 transparent}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:#b3d9e0;border-radius:9px}::-webkit-scrollbar-thumb:hover{background:var(--sky)}

/* ---- login / auth: same brand ---- */
.auth-side{background:#004767}
.auth-btn,.auth-card .btn{background:var(--grad)}
.pick:hover{border-color:var(--sky)}

/* ---- mobile ---- */
@media(max-width:860px){
  .main{padding:12px 12px 30px}.page-head{padding:18px;border-radius:18px}.dash-hero{padding:22px 20px}
  .mob-bar{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 12px;box-shadow:var(--shadow);margin-bottom:12px}
  .shell.collapsed .brand-logo,.shell.collapsed .crm-tag,.shell.collapsed .nav-label{display:revert}.shell.collapsed .logo-mark{display:none!important}
  .shell.collapsed .side-head{flex-direction:row;height:78px;padding:0 18px}.shell.collapsed .side-user{flex-direction:row;padding:12px 14px}.shell.collapsed .avatar+div{display:block}
  .brand-logo{height:30px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{body{background:#fff!important}}
.side-user b{color:var(--navy-x);font-size:13.5px}.side-user small{color:var(--muted)}
.s-row2 .stat:not(.hero){justify-content:center}
.top .icon-btn{color:#4a5f7c}.top .icon-btn:hover{background:var(--brand-soft);color:var(--navy)}
.side-user{color:var(--ink)}
.stat.t-blue{color:var(--navy)}.stat.t-cyan{color:var(--sky-d)}
.filters{border-radius:18px}.filters select{background:#f3f8fd}
.pbar.role-bar i{background:#03bfcb}

/* =====================================================================
   WEB WHALE ENTERPRISE DESIGN SYSTEM v3
   Navy #102A43 · Teal #00A6A6 · Inter. Overrides earlier theme layers.
   Document/print sheets (inv-*) are intentionally not restyled.
   ===================================================================== */
:root{--navy:#102A43;--navy-d:#0B1F33;--navy-x:#102A43;--teal:#00A6A6;--teal-d:#008A8A;--teal-soft:#E6F6F6;
--brand:#102A43;--brand-d:#0B1F33;--brand-soft:#E6F6F6;--sky:#00A6A6;--sky-d:#008A8A;--accent:#00A6A6;
--bg:#F4F7FB;--card:#fff;--ink:#172B4D;--muted:#64748B;--line:#E2E8F0;
--grn:#16A34A;--grn-bg:#E8F6EC;--amb:#D97706;--amb-bg:#FFF4E0;--red:#DC2626;--red-bg:#FDECEC;--info:#2563EB;--info-bg:#E8F0FE;
--grad:#102A43;--grad-soft:#E6F6F6;--radius:14px;--r-ctl:10px;
--shadow:0 1px 2px #102A4308,0 2px 8px #102A4308;--shadow-lg:0 8px 24px #102A4318}
html{scroll-padding-top:12px}
body{font-family:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-size:14px;line-height:1.5;background:var(--bg);color:var(--ink);background-attachment:scroll}
h1,h2,h3,.brand,.stat b,.crm-tag,.avatar,.logo-mark{font-family:"Inter","Segoe UI",system-ui,sans-serif}
h1{font-size:28px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.2}
h2{font-size:18px;font-weight:600;letter-spacing:0;color:var(--ink)}h3{font-size:15px;font-weight:600}
.small,small{font-size:13px}a{color:var(--teal-d)}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0}

/* sidebar: navy */
.top{background:var(--navy);border-right:0;box-shadow:none;color:#CBD5E1}
.side-head{border-bottom:1px solid #ffffff1a;height:68px}
.brand,.brand span{color:#fff}
.brand-logo{filter:brightness(0) invert(1)}
.crm-tag{background:var(--teal);color:#fff;font-weight:600}
.nav-label{color:#8FA3BA;font-weight:600;font-size:11px;letter-spacing:.08em}
.side-nav a{color:#CBD5E1;font-weight:500;border-radius:var(--r-ctl);padding:10px 12px}
.side-nav a svg{color:#8FA3BA}
.side-nav a:hover{background:#ffffff14;color:#fff;transform:none}.side-nav a:hover svg{color:#fff}
.side-nav a.active{background:var(--teal);color:#fff;font-weight:600;box-shadow:none}.side-nav a.active svg{color:#fff}
.top .icon-btn{color:#CBD5E1}.top .icon-btn:hover{background:#ffffff14;color:#fff}
.side-user{background:#ffffff0f;border:1px solid #ffffff1f;border-radius:12px}
.side-user b{color:#fff}.side-user small{color:#9FB2C8}.side-user .out{color:#FCA5A5}.side-user .out:hover{background:#ffffff14}
.avatar{background:var(--teal);box-shadow:none}.side-foot{color:#7F93AB}

/* page header: flat card, no decoration */
.main{padding:24px 28px 44px}
.page-head,.dash-hero{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 24px;margin-bottom:20px}
.page-head::before,.page-head::after,.dash-hero::before,.dash-hero::after{display:none}
.dash-hero h1{color:var(--ink);font-size:28px}.dash-hero p,.dash-hero .muted,.page-head p{color:var(--muted);font-size:14px}
.dash-hero .pill{background:#fff;border:1px solid var(--line);color:var(--ink);backdrop-filter:none}
.dash-hero .btn{background:var(--navy);color:#fff;box-shadow:none}.dash-hero .btn:hover{background:var(--navy-d)}
.pill{border-radius:var(--r-ctl);color:var(--ink);box-shadow:none;padding:9px 14px;font-size:13px}

/* buttons & forms */
.btn{background:var(--navy);border-radius:var(--r-ctl);box-shadow:none;font-weight:600;padding:10px 18px;transition:background .15s,border-color .15s}
.btn:hover{background:var(--navy-d);filter:none;transform:none;box-shadow:none}
.btn:disabled,.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.btn.ghost:hover{background:var(--teal-soft);border-color:#BFE6E6}
.btn.danger{background:var(--red)}.btn.danger:hover{background:#B91C1C}
.link{color:var(--teal-d)}.link:hover{color:var(--navy)}.link.danger{color:var(--red)}
input,select,textarea{border:1px solid #CBD5E1;border-radius:var(--r-ctl);padding:10px 12px;font-size:14px}
input:hover,select:hover,textarea:hover{border-color:#94A3B8}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px #00A6A633}
label{color:#334155;font-weight:500;font-size:13px}
::placeholder{color:#94A3B8}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;padding:12px}
.filters select,input[type=search]{background:#fff;box-shadow:none;border-color:#CBD5E1}

/* cards, stats */
.section,.form-card,.stat,.table-wrap,.task{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow)}
.section{padding:20px}.section h2{color:var(--ink);font-size:18px}
.stat{padding:18px 20px;min-height:104px;transition:none}.stat:hover{transform:none;box-shadow:var(--shadow)}
.stat::before,.stat::after{display:none}
.stat small{font-size:13px;font-weight:500;color:var(--muted)}
.stat b{font-size:28px;font-weight:600;letter-spacing:-.01em}
.stat .ic{width:40px;height:40px;border-radius:10px;right:16px;top:16px}.stat .ic svg{width:20px;height:20px}
.t-blue .ic,.t-cyan .ic{background:var(--teal-soft);color:var(--teal-d)}.t-blue b,.t-cyan b,.stat.t-blue,.stat.t-cyan{color:var(--navy)}
.t-green .ic{background:var(--grn-bg);color:var(--grn)}.t-orange .ic{background:var(--amb-bg);color:var(--amb)}.t-red .ic{background:var(--red-bg);color:var(--red)}.t-purple .ic{background:var(--info-bg);color:var(--info)}
.t-green b{color:var(--ink)}.t-orange b{color:var(--ink)}.t-red b{color:var(--ink)}.t-purple b{color:var(--ink)}
.stat.hero{background:var(--navy);border:0;box-shadow:none}.stat.hero b,.stat.hero small{color:#fff}
.sec-ic{border-radius:10px;width:40px;height:40px}.sec-ic.t-blue{background:var(--teal-soft);color:var(--teal-d)}
.task{background:#fff;border-left:3px solid #CBD5E1;padding:14px 16px;transition:none}.task:hover{transform:none;box-shadow:var(--shadow)}
.task.prio-high{border-left-color:var(--red)}.task.prio-medium{border-left-color:var(--info)}.task.prio-low{border-left-color:#94A3B8}
.who-chip,.chip,.pr-medium{background:var(--teal-soft);color:var(--navy)}.pr-medium{background:var(--info-bg);color:var(--info)}
.pbar,.pbar.role-bar{background:#E2E8F0}.pbar i,.pbar.role-bar i{background:var(--teal)}

/* tables */
.table-wrap{background:#fff;overflow:auto}
.tbl th{background:#F8FAFC;color:#475569;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.tbl td{border-bottom:1px solid #EEF2F7;font-size:14px}.tbl tbody tr:hover{background:#F8FAFC}

/* modal, toast */
.modal-bg{background:#102A4399;backdrop-filter:none}
.modal{border-radius:var(--radius);border-top:0;box-shadow:var(--shadow-lg);animation:none}
#toast{background:var(--navy);border-left:4px solid var(--teal);border-radius:var(--r-ctl);box-shadow:var(--shadow-lg)}#toast.err{background:#991B1B;border-left-color:#FCA5A5}
::-webkit-scrollbar-thumb{background:#CBD5E1}*{scrollbar-color:#CBD5E1 transparent}
.auth-side{background:var(--navy)}.auth-btn,.auth-card .btn{background:var(--navy)}.pick:hover{border-color:var(--teal)}
.card-login.admin{background:var(--navy);box-shadow:none}

/* ---- dashboard overview (real data) ---- */
.sec-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 12px}.sec-title h2{margin:0}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.kpi-grid .stat b{font-size:26px}.kpi-grid .stat small{display:block;max-width:calc(100% - 52px)}.kpi-grid .stat .sub{font-size:12px;color:var(--muted);margin-top:auto}
.qa{display:flex;flex-wrap:wrap;gap:10px}.qa a{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-ctl);padding:9px 14px;color:var(--ink);font-weight:500;font-size:13px}
.qa a:hover{background:var(--teal-soft);border-color:#BFE6E6;text-decoration:none}.qa a svg{width:16px;height:16px;color:var(--teal-d)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;min-width:0}.card h3{margin:0 0 12px;font-size:16px}
.bar-row{display:grid;grid-template-columns:120px 1fr 44px;gap:10px;align-items:center;margin:9px 0;font-size:13px}.bar-row .lbl{color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:#EEF2F7;border-radius:99px;height:8px;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:99px;background:var(--teal)}
.bar-row b{text-align:right;font-weight:600}
.bar-track.s-warn i{background:var(--amb)}.bar-track.s-ok i{background:var(--grn)}.bar-track.s-info i{background:var(--info)}.bar-track.s-bad i{background:var(--red)}.bar-track.s-navy i{background:var(--navy)}
.list-row{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid #EEF2F7;font-size:13px}.list-row:first-of-type{border-top:0}
.list-row b{font-weight:600;color:var(--ink)}.list-row small{color:var(--muted);display:block}.list-row .when{color:var(--muted);white-space:nowrap}.list-row .when.over{color:var(--red);font-weight:600}
.empty-sm{color:var(--muted);font-size:13px;padding:10px 0}
.skel{background:linear-gradient(90deg,#EEF2F7,#F8FAFC,#EEF2F7);background-size:200% 100%;animation:sk 1.2s infinite;border-radius:var(--r-ctl);min-height:104px}@keyframes sk{to{background-position:-200% 0}}
@media(max-width:1100px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.grid-2,.grid-3{grid-template-columns:1fr}.page-head,.dash-hero{padding:16px}.main{padding:12px 12px 30px}}
@media(prefers-reduced-motion:reduce){.skel{animation:none}}
@media print{.top,.mob-bar{display:none}}

/* ===== Phase 2: leave, notifications, breadcrumbs, audit ===== */
.crumbs{display:flex;gap:8px;font-size:12.5px;color:var(--muted);margin:0 0 6px}
.crumbs span+span::before{content:"/";margin-right:8px;color:#94A3B8}
.crumbs [aria-current]{color:var(--ink);font-weight:500}
.h-sec{font-size:16px;font-weight:600;margin:18px 0 10px;color:var(--ink)}
.alert.info{background:var(--info-bg);color:var(--info)}
.stat small+b+small,.stat b+small{display:block}
.stat>small:last-child{margin-top:2px;font-weight:400;color:var(--muted)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#EEF2F7;padding:2px 6px;border-radius:6px}
.modal textarea,.modal select{width:100%;font:inherit}
.modal .alert[hidden]{display:none}
/* notification bell + panel */
.icon-btn.bell{position:relative}
.bell-n{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:10.5px;font-weight:600;line-height:17px;text-align:center}
.bell-n[hidden]{display:none}
.notif-panel{position:fixed;left:14px;bottom:76px;width:340px;max-width:calc(100vw - 24px);max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px #102A4333;z-index:80}
.notif-panel[hidden]{display:none}
.notif-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.notif-panel ul{list-style:none;margin:0;padding:0}
.notif-panel li a{display:flex;gap:10px;padding:11px 14px;border-bottom:1px solid #EEF2F7;text-decoration:none;color:var(--ink);font-size:13px}
.notif-panel li a:hover,.notif-panel li a:focus-visible{background:#F4F7FB}
.notif-panel li a.unread{background:var(--teal-soft)}
.notif-panel li small,.notif-panel li em{display:block;color:var(--muted);font-style:normal;font-size:12px}
.notif-panel .n-ic{flex:0 0 28px;height:28px;border-radius:8px;background:#EEF2F7;display:grid;place-items:center}
.notif-panel .n-ic .i{width:16px;height:16px}
.notif-panel .empty{padding:22px;text-align:center}
@media(max-width:860px){.notif-panel{left:12px;right:12px;bottom:auto;top:58px;width:auto}}
/* leave calendar */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cal-h-d{background:#F4F7FB;padding:8px;font-size:12px;font-weight:600;color:var(--muted);text-align:center}
.cal-c{background:#fff;min-height:84px;padding:6px;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.cal-c.off{background:#FAFBFD}.cal-c.hol{background:#FFF9EC}.cal-c.today .cal-d{background:var(--teal);color:#fff}
.cal-d{font-size:12px;font-weight:600;width:22px;height:22px;border-radius:99px;display:grid;place-items:center}
.cal-h{font-size:11px;color:var(--amb);font-weight:500;line-height:1.2}
.cal-l{font-size:11px;background:var(--info-bg);color:var(--info);border-radius:6px;padding:1px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-l.pend{background:#F1F5F9;color:var(--muted)}.cal-l.more{background:transparent;color:var(--muted)}
@media(max-width:640px){.cal-c{min-height:60px;padding:3px}.cal-l,.cal-h{font-size:10px;padding:0 3px}}
@media(prefers-reduced-motion:reduce){.notif-panel{transition:none}}


/* ---------- Consistent card shadows ---------- */
.section,
.form-card,
.task,
.card-login,
.item-row,
.report-card,
.settings-card,
.mem-box,
.inv-form,
.inv-pane,
.doc-list,
.module-card,
.widget-card,
.activity-card,
.project-card,
.invoice-card,
.quotation-card,
.table-wrap,
.side-user,
.stat,
.panel,
.login-box,
.portal,
.modal,
.pill {
  box-shadow: 0 2px 8px rgba(11, 18, 32, 0.06), 0 8px 24px rgba(11, 18, 32, 0.045);
}
.card-login:hover,
.task:hover,
.report-card:hover,
.settings-card:hover,
.item-row:hover {
  box-shadow: 0 4px 12px rgba(11, 18, 32, 0.09), 0 12px 28px rgba(11, 18, 32, 0.06);
}


/* ---------- Final card elevation + sidebar navigation polish ---------- */
:root { --card-shadow: 0 3px 10px rgba(15, 35, 60, .08), 0 12px 28px rgba(15, 35, 60, .07); --card-shadow-hover: 0 7px 18px rgba(15, 35, 60, .12), 0 18px 36px rgba(15, 35, 60, .09); }
.section, .form-card, .stat, .table-wrap, .task, .page-head, .dash-hero,
.card-login, .report-card, .settings-card, .mem-box, .inv-form, .inv-pane,
.doc-list, .module-card, .widget-card, .activity-card, .project-card,
.invoice-card, .quotation-card, .item-row, .login-box, .portal, .modal,
.sheet:not(.doc), .doc-list > *, .report-panel, .chart-card, .summary-card {
  box-shadow: var(--card-shadow) !important;
}
.section:hover, .form-card:hover, .stat:hover, .task:hover, .card-login:hover,
.report-card:hover, .settings-card:hover, .item-row:hover, .module-card:hover,
.widget-card:hover, .activity-card:hover, .project-card:hover, .invoice-card:hover,
.quotation-card:hover, .summary-card:hover {
  box-shadow: var(--card-shadow-hover) !important;
}
.side-nav a { box-shadow: 0 2px 7px rgba(0,0,0,.10); transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.side-nav a:hover { box-shadow: 0 5px 13px rgba(0,0,0,.18); transform: translateY(-1px); }
.side-nav a.active { box-shadow: 0 7px 18px rgba(0, 166, 166, .28) !important; }


/* Dashboard card shadow refinement - Oct 2026 */
:root{--shadow:0 2px 6px rgba(15,35,60,.07),0 10px 26px rgba(0,71,103,.10);--shadow-lg:0 18px 38px rgba(0,71,103,.18)}
/* Make dashboard KPI/stat cards visibly elevated even before hover */
.stats .stat{box-shadow:0 3px 8px rgba(15,35,60,.06),0 12px 28px rgba(0,71,103,.12),inset 0 1px 0 rgba(255,255,255,.95);border:1px solid rgba(190,211,228,.78);}
.stats .stat:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(15,35,60,.08),0 20px 42px rgba(0,71,103,.19),inset 0 1px 0 rgba(255,255,255,.95);}
.stats .stat.hero{box-shadow:0 8px 18px rgba(0,71,103,.20),0 20px 42px rgba(0,71,103,.24);}
.stats .stat.hero:hover{box-shadow:0 12px 24px rgba(0,71,103,.23),0 26px 50px rgba(0,71,103,.28);}
/* Other dashboard content cards */
.section,.form-card,.report-card,.settings-card,.page-head,.task,.empty-state{box-shadow:0 2px 6px rgba(15,35,60,.05),0 10px 24px rgba(0,71,103,.09);}
.section:hover,.form-card:hover,.report-card:hover{box-shadow:0 5px 12px rgba(15,35,60,.07),0 16px 32px rgba(0,71,103,.13);}
@media(prefers-reduced-motion:reduce){.stats .stat,.section,.form-card,.report-card{transition:none!important}}


/* Stability patch: avoid layout/nav motion that feels like a page jolt during module navigation. */
html { scroll-behavior: auto !important; }
.shell { transition: none !important; }
.side-nav a,
.side-nav a:hover,
.side-nav a.active { transform: none !important; }
.side-nav a,
.side-nav a svg { transition: none !important; }


/* Oct 2026: prevent layout-width/scroll-anchor jumps while switching CRM modules.
   Keep the vertical scrollbar gutter reserved so pages with different heights do not
   shift horizontally, and avoid scroll anchoring pulling the viewport during content paint. */
html { scrollbar-gutter: stable; scroll-behavior: auto !important; }
body { overflow-anchor: none; }
.side-nav { overflow-anchor: none; }
.side-nav a, .side-nav a:hover, .side-nav a.active {
  transform: none !important;
  transition: none !important;
}
.side-nav a, .side-nav a:hover, .side-nav a.active {
  box-shadow: none !important;
}
/* No hover lift on dashboard cards: it can look like the whole page is jolting
   when the pointer lands on a card immediately after a navigation repaint. */
.stats .stat:hover, .section:hover, .form-card:hover, .report-card:hover,
.task:hover, .module-card:hover, .widget-card:hover, .activity-card:hover,
.project-card:hover, .invoice-card:hover, .quotation-card:hover, .summary-card:hover,
.item-row:hover { transform: none !important; }


/* ---------- smooth page-to-page navigation ---------- */
/* Cross-document View Transitions: the sidebar stays put, only the page content cross-fades. */
@view-transition{navigation:auto}
.top{view-transition-name:crm-sidebar}
::view-transition-group(crm-sidebar){animation-duration:0s}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s;animation-timing-function:ease-out}
.side-nav{scroll-behavior:auto}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}