/* GYPTO EHS V254 — CAPA KPI watermark icons
   Adds subtle semantic outline icons without changing KPI data or behaviour. */

.capa69-kpis .capa69-kpi{
  isolation:isolate;
}
.capa69-kpis .capa69-kpi > span,
.capa69-kpis .capa69-kpi > b,
.capa69-kpis .capa69-kpi > small,
.capa69-kpis .capa69-kpi .capa69-kpi-title-row{
  position:relative;
  z-index:2;
}
.capa69-kpis .capa69-kpi::after{
  content:"";
  position:absolute;
  z-index:1;
  width:68px;
  height:68px;
  right:12px;
  top:20px;
  pointer-events:none;
  opacity:.105;
  background:#64748b;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  transition:opacity .16s ease,transform .16s ease;
}
.capa69-kpis .capa69-kpi:hover::after{
  opacity:.15;
  transform:scale(1.035);
}

/* 1 — Total CAPAs: checklist / controlled record */
.capa69-kpis .capa69-kpi:nth-child(1)::after{
  background:#1677c8;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17 6h23l11 11v39H17z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M40 6v12h11M24 29l4 4 7-8M24 43l4 4 7-8M39 31h7M39 45h7' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M17 6h23l11 11v39H17z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M40 6v12h11M24 29l4 4 7-8M24 43l4 4 7-8M39 31h7M39 45h7' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 2 — Open: folder + clock */
.capa69-kpis .capa69-kpi:nth-child(2)::after{
  background:#e58a00;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 18h20l6 7h22v23H6z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Ccircle cx='46' cy='45' r='12' fill='white' stroke='black' stroke-width='4'/%3E%3Cpath d='M46 38v8l6 3' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M6 18h20l6 7h22v23H6z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Ccircle cx='46' cy='45' r='12' fill='white' stroke='black' stroke-width='4'/%3E%3Cpath d='M46 38v8l6 3' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 3 — Overdue: clock + warning */
.capa69-kpis .capa69-kpi:nth-child(3)::after{
  background:#d42043;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='29' cy='28' r='21' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M29 16v13l9 5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M43 34l15 25H28z' fill='black'/%3E%3Cpath d='M43 42v8M43 54v1' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='29' cy='28' r='21' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M29 16v13l9 5' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M43 34l15 25H28z' fill='black'/%3E%3Cpath d='M43 42v8M43 54v1' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 4 — Closed: check-circle */
.capa69-kpis .capa69-kpi:nth-child(4)::after{
  background:#15915a;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='25' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M19 33l9 9 18-21' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='25' fill='none' stroke='black' stroke-width='4'/%3E%3Cpath d='M19 33l9 9 18-21' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 5 — Completion Rate: circular progress */
.capa69-kpis .capa69-kpi:nth-child(5)::after{
  background:#078889;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='24' fill='none' stroke='black' stroke-width='8' stroke-opacity='.32'/%3E%3Cpath d='M32 8a24 24 0 1 1-21 36' fill='none' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='24' fill='none' stroke='black' stroke-width='8' stroke-opacity='.32'/%3E%3Cpath d='M32 8a24 24 0 1 1-21 36' fill='none' stroke='black' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 6 — Highest Risk: shield + alert */
.capa69-kpis .capa69-kpi:nth-child(6)::after{
  background:#b45309;
  opacity:.115;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 5c8 6 15 8 23 9v17c0 14-8 23-23 29C17 54 9 45 9 31V14c8-1 15-3 23-9z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M32 20v17M32 44v1' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 5c8 6 15 8 23 9v17c0 14-8 23-23 29C17 54 9 45 9 31V14c8-1 15-3 23-9z' fill='none' stroke='black' stroke-width='4' stroke-linejoin='round'/%3E%3Cpath d='M32 20v17M32 44v1' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.capa69-kpis .capa69-kpi:nth-child(6).low-risk::after{background:#15915a}
.capa69-kpis .capa69-kpi:nth-child(6).moderate-risk::after{background:#c59a00}
.capa69-kpis .capa69-kpi:nth-child(6).high-risk::after{background:#e27a12}
.capa69-kpis .capa69-kpi:nth-child(6).extreme-risk::after{background:#d42043}
.capa69-kpis .capa69-kpi:nth-child(6).no-risk::after{background:#64748b}

@media(max-width:1250px){
  .capa69-kpis .capa69-kpi::after{width:62px;height:62px;right:10px;top:21px}
}
@media(max-width:720px){
  .capa69-kpis .capa69-kpi::after{width:58px;height:58px;right:9px;top:22px;opacity:.09}
}