/* SHABAB NOVA ERP 1.1.1 — CRM, service desk, AMC, sites, DESIGN & HEAT MAP */
.nav .ngrp { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 12px 4px; opacity: .8; }
.nav .ngrp:first-child { padding-top: 2px; }
.xsub { margin: -10px 0 14px; }
.kpi.warn .v { color: #E11D48; } .kpi .d { font-size: 12px; color: var(--muted); margin-top: 2px; } .late { color: #E11D48 !important; font-weight: 700; }
.xrow .kpi.xt { border: 0; background: linear-gradient(135deg, rgba(123,47,247,.10), rgba(241,7,163,.06)); }
.xrow .kpi.hmk { background: linear-gradient(135deg, #0B1023, #241559 55%, #3B0F57); color: #fff; } .xrow .kpi.hmk .l, .xrow .kpi.hmk .d { color: #C9C2FF; }
.xrow .kpi.hmk::before { content: ""; position: absolute; inset: auto -20px -30px auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(0,212,255,.55), rgba(241,7,163,.35) 40%, rgba(255,138,0,0) 70%); }
tr.click { cursor: pointer; } tr.click:hover td { background: var(--soft); } .tw { overflow-x: auto; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }
.badge.pr.P1 { background: #FDE2E7; color: #B4123C; } .badge.pr.P2 { background: #FFEBD5; color: #A04A00; } .badge.pr.P3 { background: #E7EEFF; color: #1E429F; } .badge.pr.P4 { background: var(--soft); color: var(--muted); }
.sla { margin-inline-start: auto; align-self: center; }
.g2x { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; } .g2x > .card { margin: 0 0 16px; }
.dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; } .dl dt { color: var(--muted); font-size: 12.5px; font-weight: 600; } .dl dd { margin: 0; }
.tl .ti { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); } .tl .ti:last-child { border: 0; }
.dotk { width: 10px; height: 10px; border-radius: 50%; background: var(--grad); margin-top: 6px; flex: 0 0 10px; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; } .stp { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 7px 13px; border-radius: 99px; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.stp.on { background: var(--grad); color: #fff; border-color: transparent; } .stp.on.g { background: linear-gradient(135deg, #059669, #10B981); } .stp.on.r { background: linear-gradient(135deg, #BE123C, #F43F5E); }
.board { display: grid; grid-template-columns: repeat(9, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 10px; }
.board .col { background: var(--soft); border-radius: 16px; padding: 10px; min-height: 260px; border: 2px dashed transparent; transition: border-color .15s; } .board .col.over { border-color: var(--a1); }
.board .ch { display: flex; align-items: center; gap: 6px; padding: 2px 4px 10px; font-size: 12.5px; } .board .ch .sp { flex: 1; }
.lc { display: flex; flex-direction: column; gap: 3px; background: var(--card); border-radius: 13px; padding: 10px 12px; margin-bottom: 9px; box-shadow: var(--shadow); color: var(--ink); border-inline-start: 4px solid var(--a1); cursor: grab; }
.lc:hover { text-decoration: none; box-shadow: var(--shadow2); } .lc.drag { opacity: .5; } .lc .lv { font-weight: 800; font-size: 13px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.dcard { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 0 16px 14px; overflow: hidden; color: var(--ink); box-shadow: var(--shadow); }
.dcard:hover { text-decoration: none; box-shadow: var(--shadow2); transform: translateY(-2px); transition: .15s; } .dcard .row2 { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .dcard .row2 .sp { flex: 1; }
.dcard .dart { display: block; height: 120px; margin: 0 -16px 10px; background: radial-gradient(circle at 25% 40%, rgba(0,200,140,.9), rgba(0,200,140,0) 28%), radial-gradient(circle at 60% 55%, rgba(245,225,30,.85), rgba(245,225,30,0) 30%), radial-gradient(circle at 80% 30%, rgba(255,100,40,.8), rgba(255,100,40,0) 26%), radial-gradient(circle at 45% 80%, rgba(40,215,80,.8), rgba(40,215,80,0) 30%), linear-gradient(135deg, #070B1C, #1C2350); }
/* ---------------- heat map editor */
.hmhead h2 { display: flex; align-items: center; gap: 10px; } .hmdot { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(#00C88C, #F5E11E, #FF6428, #7B2FF7, #00C88C); box-shadow: 0 0 14px rgba(0,212,255,.6); }
.hmhead .btn { margin-inline-start: 2px; }
.hmfloors { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; align-items: center; } .hmfloors .sp { flex: 1; } .chip.up { cursor: pointer; }
.hm { display: grid; grid-template-columns: 92px minmax(0, 1fr) 330px; gap: 14px; align-items: start; }
.hmtools { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 74px; }
.tool { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.tool span { font-size: 18px; line-height: 1; } .tool small { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.2; } .tool.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(123,47,247,.3); } .tool.on small { color: #fff; }
.mats { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .mat { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 7px; font-size: 10.5px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; text-align: start; }
.mat i { display: block; width: 100%; height: 4px; border-radius: 3px; } .mat small { color: var(--muted); } .mat.on { border-color: var(--a1); box-shadow: 0 0 0 2px rgba(123,47,247,.25); }
.mt-drywall { background: #9AA3C7; } .mt-glass { background: #4FC3F7; } .mt-window { background: #7FE0FF; } .mt-wood { background: #B07A4A; } .mt-brick { background: #D0603F; } .mt-concrete { background: #8A8F9E; } .mt-heavy { background: #5D6170; } .mt-metal { background: #C9CCD6; } .mt-elevator { background: #FF8A00; }
.hmviews { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 8px; align-items: center; } .hmviews .sp { flex: 1; }
.vw { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 6px 11px; border-radius: 99px; font-weight: 700; font-size: 12px; cursor: pointer; } .vw.on { background: #0B1023; color: #fff; border-color: #0B1023; box-shadow: inset 0 0 0 1px rgba(0,212,255,.6), 0 4px 14px rgba(0,212,255,.25); }
[data-theme="dark"] .vw.on { background: linear-gradient(135deg, #00D4FF, #7B2FF7); border-color: transparent; }
select.in.sm { width: auto; min-height: 30px; padding: 4px 8px; border-radius: 99px; font-size: 12px; }
.hmstage { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(11,16,35,.35), inset 0 0 0 1px rgba(255,255,255,.06); background: #070B1C; perspective: 1400px; }
.hmstage canvas { display: block; cursor: crosshair; transition: transform .6s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 60%; }
.hmstage.three canvas { transform: rotateX(52deg) rotateZ(-16deg) scale(.86) translateY(-6%); box-shadow: 0 60px 80px rgba(0,0,0,.55); border-radius: 14px; }
.hmstage.three { background: radial-gradient(ellipse at 50% 30%, #1C2350, #05070F 70%); }
.hmtip { position: absolute; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 9px 11px; border-radius: 12px; background: rgba(8,11,28,.92); color: #E9ECF8; font-size: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); border: 1px solid rgba(0,212,255,.35); backdrop-filter: blur(6px); }
.hmtip b { font-size: 14px; } .hmtip .muted { color: #8C93BA; }
.w-excellent { color: #00C88C; } .w-vgood { color: #3DDC6E; } .w-good { color: #C8E632; } .w-fair { color: #FFB01E; } .w-weak { color: #FF5A3C; } .w-nosig { color: #B4123C; }
.hmcmp { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: linear-gradient(#00D4FF, #F107A3); box-shadow: 0 0 14px #00D4FF; cursor: ew-resize; pointer-events: none; }
.hmcmp span { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: rgba(8,11,28,.9); color: #fff; font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 99px; }
.hmbanner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px; background: linear-gradient(135deg, #7B2FF7, #F107A3); color: #fff; font-weight: 700; font-size: 12.5px; box-shadow: 0 8px 24px rgba(241,7,163,.35); z-index: 4; }
.hmlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 2px 0; font-size: 12px; } .hmlegend span { display: inline-flex; align-items: center; gap: 6px; } .hmlegend i { width: 22px; height: 10px; border-radius: 5px; display: inline-block; }
.hmpred { margin: 6px 2px 0; }
.hmside { display: flex; flex-direction: column; gap: 10px; }
.hcard { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--shadow); } .hcard h4 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hcard.score { text-align: center; background: linear-gradient(160deg, #0B1023, #1B1446 60%, #33104D); color: #fff; border: 0; } .hcard.score .sl { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; color: #C9C2FF; margin-top: -6px; } .cmpv { margin-top: 4px; color: #9FF5D8; }
.gauge { width: 200px; max-width: 100%; } .gauge .gv { font: 800 34px Montserrat, sans-serif; } .gauge .gl { font: 600 11px Montserrat, sans-serif; fill: #9AA2C8; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stats .st { background: var(--card); border: 1px solid var(--line); border-radius: 13px; padding: 9px 11px; } .stats .st b { display: block; font-size: 16px; letter-spacing: -.01em; } .stats .st span { font-size: 11px; color: var(--muted); }
.hbars .hb { display: grid; grid-template-columns: 92px 1fr 48px; gap: 8px; align-items: center; font-size: 11.5px; margin: 4px 0; } .hbars .hb b { text-align: end; }
.tr { height: 8px; background: var(--soft); border-radius: 6px; overflow: hidden; } .tr i { display: block; height: 100%; border-radius: 6px; background: var(--grad); transition: width .5s; }
.tr i.grn { background: linear-gradient(90deg, #10B981, #34D399); } .tr i.amb { background: linear-gradient(90deg, #F59E0B, #FBBF24); } .tr i.red { background: linear-gradient(90deg, #E11D48, #FB7185); }
.tr i.w-excellent { background: #00C88C; } .tr i.w-vgood { background: #3DDC6E; } .tr i.w-good { background: #C8E632; } .tr i.w-fair { background: #FFB01E; } .tr i.w-weak { background: #FF5A3C; } .tr i.w-nosig { background: #B4123C; }
.poe { margin: 6px 0 10px; } .poe .row { display: flex; gap: 6px; align-items: baseline; font-size: 12px; margin-bottom: 4px; } .poe .sp { flex: 1; }
.chans { display: flex; flex-wrap: wrap; gap: 6px; } .chp { padding: 4px 10px; border-radius: 99px; color: #fff; font-size: 12px; } .chp.c0 { background: #7B2FF7; } .chp.c1 { background: #F107A3; } .chp.c2 { background: #FF8A00; } .chp.c3 { background: #2E6BFF; } .chp.c4 { background: #00A7C8; } .chp.c5 { background: #18C29C; } .chp.c6 { background: #8E6BFF; } .chp.c7 { background: #FF5FC8; } .chp.c8 { background: #C9A400; }
.libl { display: flex; flex-direction: column; gap: 6px; max-height: 330px; overflow-y: auto; } .li { text-align: start; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.li span { font-size: 11.5px; color: var(--muted); } .li small { font-size: 11px; color: var(--muted); } .li.on { border-color: var(--a1); box-shadow: 0 0 0 2px rgba(123,47,247,.22); }
.selc .field { margin-bottom: 8px; } .selc .badge { white-space: normal; text-transform: none; }
.wchart { margin-top: 8px; } .wsvg { width: 100%; background: #0B1023; border-radius: 10px; } .wsvg .wl { fill: none; stroke: #00D4FF; stroke-width: 2; } .wsvg .tg { stroke: rgba(255,214,0,.6); stroke-dasharray: 4 3; } .wsvg .ho { stroke: #F107A3; stroke-width: 1.5; } .wsvg .ht { fill: #C9C2FF; font: 600 9px Montserrat, sans-serif; }
table.boq tr.sec td { background: linear-gradient(90deg, rgba(123,47,247,.14), rgba(241,7,163,.06)); font-weight: 800; letter-spacing: .02em; }
table.boq tr.subt td { font-weight: 700; color: var(--muted); } table.boq tr.tot td { font-weight: 800; } table.boq tr.tot.g td { font-size: 15px; background: var(--soft); }
.net { width: 100%; } .net rect { stroke: #fff; stroke-width: 1.5; } .net .n0 { fill: #2E6BFF; } .net .n1 { fill: #7B2FF7; } .net .n2 { fill: #FF8A00; } .net .n3 { fill: #18C29C; } .net text { fill: #fff; font: 700 11px Montserrat, sans-serif; } .net line { stroke: #9AA2C8; stroke-width: 1.5; }
.hmprint { display: none; }
@media (max-width: 1250px) { .hm { grid-template-columns: 80px minmax(0, 1fr); } .hmside { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .g2x { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .hm { grid-template-columns: 1fr; } .hmtools { flex-direction: row; flex-wrap: wrap; position: static; } .tool { flex: 1 0 60px; } }
/* ---------------- printed DESIGN REPORT (A3 landscape) */
@media print {
  body.hm-printing { background: #fff !important; } body.hm-printing #app { display: none !important; } body.hm-printing #hmprint-body { display: block !important; }
  body.hm-printing .dlg-back, body.hm-printing .toasts { display: none !important; }
}
@page hmrep { size: A3 landscape; margin: 10mm; }
.hmprint .pg { page: hmrep; page-break-after: always; break-after: page; position: relative; min-height: 260mm; padding: 0 0 14mm; font-family: Montserrat, sans-serif; color: #141833; }
.hmprint .ph { display: flex; gap: 14px; align-items: baseline; border-bottom: 3px solid #7B2FF7; padding: 4mm 0 3mm; margin-bottom: 5mm; font-size: 13px; } .hmprint .ph .sp { flex: 1; } .hmprint .ph b { font-size: 15px; }
.hmprint .pf { position: absolute; bottom: 0; left: 0; right: 0; font-size: 10px; color: #5E6487; border-top: 1px solid #E3E6F2; padding-top: 2mm; }
.hmprint .pimg { width: 100%; max-height: 210mm; object-fit: contain; border-radius: 10px; } .hmprint .pst { font-size: 13px; margin-top: 3mm; font-weight: 600; }
.hmprint .cover { background: linear-gradient(135deg, #070B1C, #241559 55%, #3B0F57); color: #fff; border-radius: 14px; overflow: hidden; }
.hmprint .cv-band { height: 10px; background: linear-gradient(90deg, #7B2FF7, #F107A3, #FF8A00, #2E6BFF, #00D4FF); } .hmprint .cv-in { padding: 24mm 22mm; } .hmprint .cv-co { font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: #C9C2FF; }
.hmprint .cover h1 { font-size: 44px; margin: 6mm 0 2mm; } .hmprint .cv-sub { font-size: 16px; color: #C9C2FF; } .hmprint .cv-row { display: flex; gap: 20mm; align-items: center; margin-top: 16mm; } .hmprint .cv-g { text-align: center; } .hmprint .cv-g .gauge { width: 300px; }
.hmprint .cv-st { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8mm 14mm; } .hmprint .cv-st b { display: block; font-size: 30px; } .hmprint .cv-st span { color: #C9C2FF; font-size: 13px; } .hmprint .cv-note { margin-top: 16mm; color: #9AA2C8; font-size: 12px; }
.hmprint .g2p { display: grid; grid-template-columns: 1.2fr 1fr; gap: 10mm; } .hmprint table.t { font-size: 12px; } .hmprint table.t th { position: static; }
.shell > div { min-width: 0; } .main { min-width: 0; }
/* ---- NOVA 1.2.0 heat map: doors, loss areas, pass / fail, antenna, CAD import, drawings ---- */
.hmstage canvas.hmtouch { touch-action: none; }
.dm-wood { background: #B07A4A; } .dm-glass { background: #4FC3F7; } .dm-metal { background: #C9CCD6; } .dm-fire { background: #E0533D; } .dm-open { background: #7DFFB0; }
.am-shelves { background: #C58B4B; } .am-racks { background: #9AA3B5; } .am-crowd { background: #F107A3; } .am-water { background: #2E6BFF; } .am-kitchen { background: #FF8A00; } .am-trees { background: #18C29C; } .am-cars { background: #B794FF; }
.mats .fld { margin: 2px 0 0; } .mats .fld input { width: 100%; padding: 4px 6px; font-size: 12px; }
.hmtools .detect { margin-top: 6px; font-size: 11px; white-space: normal; line-height: 1.2; }
.reqbig { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; margin: 6px 0; color: #fff; }
.reqbig b { font-size: 26px; } .reqbig span { font-size: 12px; line-height: 1.3; }
.reqbig.ok { background: linear-gradient(135deg, #0E9F6E, #18C29C); } .reqbig.mid { background: linear-gradient(135deg, #D97706, #FFB300); } .reqbig.bad { background: linear-gradient(135deg, #BE123C, #F43F5E); }
table.zt { font-size: 12px; width: 100%; } table.zt td { padding: 4px 6px; } .zok { color: #0E9F6E; } .zbad { color: #E11D48; }
.antsvg { width: 100%; height: auto; display: block; }
.row.wrapb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } label.btn.up { cursor: pointer; }
.stats.s2 { grid-template-columns: 1fr 1fr; }
.layl { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; margin-top: 8px; }
.layl .row { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed var(--line); } .layl .row .fld { margin: 0; min-width: 170px; } .layl .ln { font-size: 12.5px; word-break: break-all; }
.svgl { display: flex; flex-wrap: wrap; gap: 6px; }
@page dwga4 { size: A4 landscape; margin: 0; } @page dwga3 { size: A3 landscape; margin: 0; } @page dwga2 { size: A2 landscape; margin: 0; }
.hmprint .pg.dwg { min-height: 0; padding: 0; break-after: page; page-break-after: always; } .hmprint .pg.dwg-a4 { page: dwga4; } .hmprint .pg.dwg-a3 { page: dwga3; } .hmprint .pg.dwg-a2 { page: dwga2; }
.hmprint .dwgsvg { display: block; background: #fff; }