@font-face{font-family:Poppins;src:url(fonts/Poppins-Regular.woff) format("woff");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Medium.woff) format("woff");font-weight:500 600;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Bold.woff) format("woff");font-weight:700 800;font-display:swap}
@font-face{font-family:Poppins;src:url(fonts/Poppins-Italic.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}
:root{
  /* Capnova brand (capnova-ms.com) */
  --navy:#062A57; --navy-2:#0B3A74; --blue:#1466C8; --teal:#12B5AE; --aqua:#63E1E6; --deep:#051733;
  --ice:#F3F8FC; --ice-2:#E8F2FA; --tealbg:#E7F6F5;
  --grad:linear-gradient(100deg,#0B3A74 0%,#1466C8 50%,#12B5AE 100%);
  --brand:#062A57; --brand-d:#051733; --brand-l:#E8F2FA; --ink:#062A57; --body:#43577A; --muted:#6B7F9E; --line:#D9E6F2;
  --bg:#F3F8FC; --card:#fff; --ok:#0E8F89; --okbg:#E3F6F4; --warn:#B86E00; --warnbg:#FFF2DB; --bad:#C0352B; --badbg:#FDE9E7;
  --info:#1466C8; --infobg:#E6F0FC; --r:14px; --sh:0 1px 2px rgba(6,42,87,.06),0 12px 30px -22px rgba(6,42,87,.35);
  --side:240px; --font:Poppins,"Segoe UI",system-ui,-apple-system,"Noto Sans Arabic",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:13.5px/1.5 var(--font);color:var(--body);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--navy);font-weight:600;letter-spacing:-.01em}
a{color:var(--brand);text-decoration:none}
h1{font-size:21px;margin:0}h2{font-size:15.5px;margin:0 0 10px}h3{font-size:12px;margin:0 0 8px;color:var(--teal);text-transform:uppercase;letter-spacing:.06em}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}

/* ---------- layout ---------- */
#app{display:flex;min-height:100%}
.side{width:var(--side);background:linear-gradient(180deg,#062A57 0%,#051733 100%);color:#BFD3E8;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;z-index:20}
.side .logo{padding:20px 18px 6px}
.side .logo img{width:100%;max-width:190px;height:auto;display:block}
.side .logo small{display:block;margin:6px 0 0 4px;font-size:10px;letter-spacing:.32em;color:var(--aqua);font-weight:500}
.side nav{flex:1;overflow:auto;padding:6px 10px}
.side nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:999px;color:#D6E4F5;margin-bottom:2px;font-weight:500}
.side nav a:hover{background:#ffffff12;color:#fff}
.side nav a.on{background:var(--grad);color:#fff;box-shadow:0 10px 24px -14px rgba(18,181,174,.8)}
.side nav .sep{font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--aqua);opacity:.75;padding:16px 12px 6px}
.side .me{padding:12px 16px;border-top:1px solid #ffffff14;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.side .me a{color:var(--aqua)}
.ico{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
main{flex:1;margin-left:var(--side);min-width:0;padding:22px 26px 40px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.top h1{flex:1;min-width:150px}
.top .acts{display:flex;gap:8px;flex-wrap:wrap}
.bnav{display:none}

/* ---------- components ---------- */
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin-bottom:16px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px}
.kpi{border-top:3px solid var(--teal)}.kpi .l{color:var(--teal);font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:500}.kpi .v{font-size:22px;font-weight:600;color:var(--navy);margin-top:4px;font-variant-numeric:tabular-nums}.kpi .s{font-size:12px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid #BFD3E8;background:#fff;color:var(--navy);padding:8px 16px;border-radius:999px;cursor:pointer;white-space:nowrap;font-weight:500;transition:border-color .2s,background-position .4s}
.btn:hover{border-color:var(--teal)}
.btn.p{background:var(--grad);background-size:200% 100%;border-color:transparent;color:#fff;box-shadow:0 10px 22px -14px rgba(20,102,200,.8)}.btn.p:hover{background-position:100% 0}
.btn.d{color:var(--bad)}.btn.sm{padding:5px 9px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:default}
.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11.5px;font-weight:600;background:#eef2f4;color:var(--muted);white-space:nowrap}
.b-ok{background:var(--okbg);color:var(--ok)}.b-warn{background:var(--warnbg);color:var(--warn)}.b-bad{background:var(--badbg);color:var(--bad)}.b-info{background:var(--infobg);color:var(--info)}.b-brand{background:var(--brand-l);color:var(--brand-d)}
.muted{color:var(--muted)}.small{font-size:12px}.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.toolbar input,.toolbar select{padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.toolbar .search{flex:1;min-width:160px}

table.t{width:100%;border-collapse:collapse;background:#fff}
.t th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--navy);text-align:left;padding:10px;font-weight:500}
.t tbody tr:nth-child(even) td{background:#F8FBFD}
.t td{padding:10px;border-bottom:1px solid #edf2f4;vertical-align:top}
.t tr.click{cursor:pointer}.t tr.click:hover td{background:#f7fafb}
.tw{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:auto}
.empty{padding:36px;text-align:center;color:var(--muted)}

/* forms */
.f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.f .full{grid-column:1/-1}
.f label,.fl{display:block;font-size:11px;font-weight:500;color:var(--teal);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
.f input,.f select,.f textarea,.in{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}
.f textarea{min-height:78px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus,.in:focus{outline:2px solid #12B5AE33;border-color:var(--teal)}
.f .chk{display:flex;align-items:center;gap:8px;padding-top:22px}.f .chk input{width:auto}

/* modal */
.ov{position:fixed;inset:0;background:#0b1f2770;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}
.mdl{background:#fff;border-radius:14px;width:100%;max-width:640px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0004}
.mdl.w{max-width:860px}
.mdl .mh{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.mdl .mh h2{flex:1;margin:0}
.mdl .mb{padding:18px;overflow:auto}
.mdl .mf{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.x{border:0;background:none;font-size:22px;cursor:pointer;color:var(--muted);line-height:1}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:6px;align-items:center}
#toast div{background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;box-shadow:var(--sh);max-width:90vw}
#toast div.err{background:var(--bad)}

/* kanban */
.kb{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.kcol{flex:0 0 260px;background:var(--ice-2);border-radius:var(--r);padding:10px;scroll-snap-align:start;display:flex;flex-direction:column;max-height:calc(100vh - 200px)}
.kcol .kh{display:flex;justify-content:space-between;align-items:baseline;padding:2px 4px 8px;font-weight:700;font-size:13px}
.kcol .kh span{font-weight:500;color:var(--muted);font-size:12px}
.kcol .kl{overflow:auto;flex:1;min-height:40px}
.kcol.over{background:#D2EEEC}
.kc{background:#fff;border-radius:10px;padding:10px 11px;margin-bottom:8px;box-shadow:0 1px 2px #0002;cursor:pointer}
.kc .tt{font-weight:600}.kc .mm{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.kc{border-left:3px solid var(--teal)}.kc.due{border-left-color:var(--warn)}

/* doc editor */
.items{width:100%;border-collapse:collapse}
.items th{font-size:11.5px;color:var(--muted);text-align:left;padding:6px;border-bottom:1px solid var(--line)}
.items td{padding:5px;vertical-align:top;border-bottom:1px solid #f0f4f6}
.items input,.items select,.items textarea{width:100%;padding:7px;border:1px solid var(--line);border-radius:7px;background:#fff}
.items textarea{min-height:38px;resize:vertical}
.totals{margin-left:auto;max-width:320px}
.totals div{display:flex;justify-content:space-between;padding:5px 0;gap:10px}.totals .g{font-weight:700;font-size:16px;border-top:2px solid var(--ink);margin-top:4px;padding-top:8px}
.totals input{width:110px;text-align:right;padding:5px 7px;border:1px solid var(--line);border-radius:7px}
.timeline{list-style:none;margin:0;padding:0}.timeline li{padding:8px 0;border-bottom:1px solid #eef2f4}.timeline .w{font-size:11.5px;color:var(--muted)}
.bars{display:flex;align-items:flex-end;gap:6px;height:140px;padding-top:10px}
.bars div{flex:1;background:linear-gradient(180deg,#12B5AE,#1466C8);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.bars div span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;font-size:10px;color:var(--muted)}
.hbar{display:flex;align-items:center;gap:8px;margin:6px 0;font-size:12.5px}.hbar .lb{width:120px;flex:none}.hbar .tr{flex:1;background:#eef2f4;border-radius:5px;height:10px;overflow:hidden}.hbar .tr i{display:block;height:100%;background:var(--grad)}
.sig{border:1px dashed #9db3bc;border-radius:10px;background:#fbfdfe;touch-action:none;width:100%;height:160px;display:block}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(1200px 600px at 80% -10%,#12B5AE55,transparent),linear-gradient(150deg,#062A57,#051733)}
.login img{width:220px;display:block;margin:0 auto 14px}
.login .card{width:100%;max-width:380px;padding:28px}
.login h1{color:var(--navy);margin-bottom:2px;text-align:center;font-size:18px}.login p{text-align:center}

/* ---------- mobile ---------- */
@media (max-width: 860px){
  .side{display:none}
  main{margin-left:0;padding:14px 12px 90px}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2{grid-template-columns:1fr}
  .f{grid-template-columns:1fr}
  .top h1{font-size:18px}
  .bnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:30;padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .bnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;color:var(--muted);padding:6px 0}
  .bnav a.on{color:var(--brand)}
  .ov{align-items:flex-end;padding:0}
  .mdl{max-height:94vh;border-radius:16px 16px 0 0}
  .mdl .mf{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  /* tables become cards */
  table.rsp thead{display:none}
  table.rsp tr{display:block;border-bottom:1px solid var(--line);padding:8px 4px}
  table.rsp td{display:flex;justify-content:space-between;gap:10px;border:0;padding:3px 8px;text-align:right}
  table.rsp td::before{content:attr(data-l);color:var(--muted);font-size:12px;text-align:left}
  table.rsp td.num{white-space:normal}
  .items thead{display:none}
  .items tr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}
  .items td{border:0;padding:0}
  .items td.desc{grid-column:1/-1}
  .kcol{flex-basis:82vw}
}
.sheet a{display:flex;align-items:center;gap:12px;padding:13px 6px;border-bottom:1px solid #eef2f4;color:var(--ink)}

/* ---------- print (matches Capnova quotation layout) ---------- */
#print{display:none}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff}
  #app,#toast,.ov{display:none!important}
  #print{display:block}
}
.pd{font:9.6pt/1.45 var(--font);color:#43577A;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.pd b,.pd strong{color:#062A57;font-weight:600}
.pd .topbar{position:fixed;top:0;left:0;right:0;height:2.2mm;background:linear-gradient(90deg,#062A57 0 72%,#12B5AE 72% 100%)}
.pd .head{position:fixed;top:0;left:0;right:0;height:33mm;padding:9mm 17mm 0;display:flex;justify-content:space-between;align-items:flex-start}
.pd .head::after{content:"";position:absolute;left:17mm;right:17mm;bottom:0;border-bottom:1px solid #D9E6F2}
.pd .head img{height:17mm;width:auto}
.pd .head .ct{text-align:right;font-size:8.6pt;line-height:1.75;color:#6B7F9E;padding-top:.5mm}
.pd .head .ct .c2{color:#062A57;font-weight:500}.pd .head .ct .c3{color:#12B5AE;font-weight:500}
.pd .foot{position:fixed;bottom:0;left:0;right:0;height:17mm;background:#062A57;color:#C9D7EC;padding:4mm 17mm 0;display:flex;justify-content:space-between;overflow:hidden;font-size:7.6pt;line-height:1.55}
.pd .foot::before{content:"";position:absolute;right:-30mm;top:-6mm;width:150mm;height:60mm;border:1px solid #ffffff14;border-radius:50%}
.pd .foot b{color:#fff;font-size:9pt;font-weight:600}.pd .foot .r{text-align:right;color:#fff}.pd .foot .r span{color:#63E1E6;display:block}
.pd table.frame{width:100%;border-collapse:collapse}
.pd table.frame>thead td{height:37mm;padding:0}.pd table.frame>tfoot td{height:21mm;padding:0}
.pd table.frame>tbody>tr>td{padding:0 17mm}
.pd .titlebar{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3mm}
.pd .kick{color:#12B5AE;font-size:9.5pt;font-weight:500}
.pd h1{font-size:25pt;line-height:1.1;color:#062A57;font-weight:700;margin:0;letter-spacing:-.01em}
.pd .refno{text-align:right}.pd .refno .k{font-size:7.5pt;color:#6B7F9E;letter-spacing:.06em}.pd .refno .n{font-size:13pt;font-weight:700;color:#062A57;letter-spacing:.02em}.pd .refno .d{font-size:8.6pt;color:#6B7F9E}
.pd .info{background:#F1F6FB;border-radius:3mm;display:grid;grid-template-columns:1.45fr 1fr 1fr;overflow:hidden;margin-bottom:3mm}
.pd .info>div{padding:2.1mm 4mm;border-right:1px solid #DCE7F2;border-bottom:1px solid #DCE7F2;font-size:9.5pt;color:#062A57;font-weight:500;line-height:1.4}
.pd .info>div:nth-child(3n){border-right:0}.pd .info>div:nth-last-child(-n+3){border-bottom:0}
.pd .lbl{display:block;font-size:7.3pt;color:#12B5AE;font-weight:500;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4mm}
.pd .info a,.pd .info .em{color:#1466C8;font-weight:400}
.pd .strip{border-left:1mm solid #12B5AE;margin:0 0 3mm}
.pd .strip div{display:grid;grid-template-columns:31mm 1fr;padding:1.5mm 4mm;border-bottom:1px solid #E3ECF5;font-size:9pt;color:#062A57}
.pd .strip div:last-child{border-bottom:0}.pd .strip .lbl{margin:0;padding-top:.6mm}
.pd .intro{margin:0 0 3mm;font-size:9.8pt;color:#43577A;white-space:pre-wrap}
.pd .sec{margin:3mm 0 2.5mm;break-inside:avoid;page-break-inside:avoid;break-after:avoid}
.pd .sec::before{content:"";display:block;width:12mm;height:.9mm;background:#12B5AE;margin-bottom:1.6mm}
.pd .sec .kk{font-size:7.6pt;color:#12B5AE;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.pd .sec h2{font-size:14.5pt;color:#062A57;font-weight:700;margin:.2mm 0 0;letter-spacing:-.01em}
.pd .card{border:1px solid #D9E6F2;border-radius:3mm;display:flex;overflow:hidden;margin-bottom:4mm;break-inside:avoid;page-break-inside:avoid}
.pd .card .tx{flex:1;padding:3mm 5mm 2.5mm}
.pd .card .im{width:46mm;background:#F1F6FB;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4mm;gap:2mm}
.pd .card .im img{max-width:100%;max-height:60mm;object-fit:contain;border-radius:1mm}
.pd .card .im .cap{background:#E1F3F2;color:#12B5AE;font-size:7.8pt;padding:1mm 3mm;border-radius:99px;font-weight:500;text-align:center}
.pd .card .it{font-size:7.6pt;color:#12B5AE;font-weight:500;letter-spacing:.04em}
.pd .card h3{font-size:13pt;color:#062A57;font-weight:700;margin:.4mm 0 .6mm;text-transform:none;letter-spacing:-.01em}
.pd .card .mf{font-style:italic;color:#6B7F9E;font-size:9pt;margin-bottom:1.5mm}
.pd .desc h4{font-size:9.4pt;color:#062A57;font-weight:600;margin:1.8mm 0 .6mm}
.pd .desc p{margin:0 0 1.4mm}
.pd ul.dots{margin:0 0 1.6mm;padding:0;list-style:none}
.pd ul.dots li{position:relative;padding-left:3.6mm;margin:.6mm 0;font-size:9.2pt;line-height:1.45}
.pd .desc ul.dots li{margin:.15mm 0;line-height:1.33}
.pd .desc ul.dots li{font-size:8.5pt}
.pd ul.dots li::before{content:"";position:absolute;left:.4mm;top:1.55mm;width:1.3mm;height:1.3mm;border-radius:50%;background:#12B5AE}
.pd table.g{width:100%;border-collapse:separate;border-spacing:0;font-size:9pt}
.pd table.g th{background:#062A57;color:#fff;font-weight:500;text-align:left;padding:3mm 3mm;font-size:8.6pt}
.pd table.g th:first-child{border-top-left-radius:2.5mm}.pd table.g th:last-child{border-top-right-radius:2.5mm}
.pd table.g td{padding:2.8mm 3mm;border-bottom:1px solid #E3ECF5;vertical-align:middle;color:#43577A}
.pd table.g tbody tr:nth-child(even) td{background:#F4F8FC}
.pd table.g tr{break-inside:avoid;page-break-inside:avoid}
.pd table.g .c{text-align:center}.pd table.g .r{text-align:right;white-space:nowrap}
.pd table.g .inc{color:#12B5AE;font-weight:500}
.pd table.g .sub{font-size:8.2pt;color:#6B7F9E;white-space:pre-wrap}
.pd .tots{margin:0 0 0 auto;width:60%;break-inside:avoid;page-break-inside:avoid}
.pd .tots div{display:flex;justify-content:space-between;padding:2.2mm 3mm;border-bottom:1px solid #E3ECF5;font-size:9.4pt}
.pd .tots div span:first-child{color:#6B7F9E;flex:1;text-align:right;padding-right:8mm}.pd .tots div b{min-width:30mm;text-align:right}
.pd .tots .gt{background:#12B5AE;border-radius:2.5mm;border:0;margin-top:2mm;padding:3.4mm 4mm;align-items:center}
.pd .tots .gt span:first-child{color:#fff}.pd .tots .gt b{color:#fff;font-size:15pt;font-weight:700}
.pd .callout{background:#E8F5F4;border-left:1mm solid #12B5AE;padding:3mm 4mm;margin:4mm 0;font-size:9pt;white-space:pre-wrap;break-inside:avoid;page-break-inside:avoid}
.pd .words{font-size:8.8pt;margin:2.5mm 0 0;text-align:right;color:#6B7F9E}
.pd table.kv{width:100%;border-collapse:collapse;font-size:9.2pt}
.pd table.kv td{padding:2.6mm 4mm;border-bottom:1px solid #E3ECF5;vertical-align:top}
.pd table.kv td:first-child{width:45mm;background:#F1F6FB;color:#062A57;font-weight:500}
.pd table.kv tr{break-inside:avoid;page-break-inside:avoid}
.pd .regards{border-left:1mm solid #12B5AE;padding:1mm 0 1mm 5mm;margin:8mm 0 0;break-inside:avoid;page-break-inside:avoid}
.pd .regards .nm{font-size:13pt;font-weight:700;color:#062A57;margin-top:3mm}
.pd .regards .tt{color:#12B5AE;font-size:9pt}.pd .regards .ph{font-size:8.8pt;color:#6B7F9E}
.pd .sigs{display:flex;gap:12mm;margin-top:8mm;break-inside:avoid;page-break-inside:avoid}
.pd .sigs>div{flex:1;font-size:8.6pt;text-align:center;color:#6B7F9E}
.pd .sigs .sp{height:20mm;display:flex;align-items:flex-end;justify-content:center}.pd .sigs .sp img{max-height:19mm;max-width:100%}
.pd .sigs .ln{border-top:1px solid #062A57;padding-top:1.4mm}.pd .sigs .ln b{display:block}
.pd .st{font-weight:500}.pd .st.ok{color:#12B5AE}.pd .st.alt{color:#D97706}.pd .st.no{color:#C0352B}
.pd .pre{white-space:pre-wrap}