/* GYPTO EHS V157 — CAPA KPI attention colors
   Soft semantic backgrounds + strong top accent. Loaded last so it overrides
   the white-card rules from the corporate redesign without changing layout. */

body.v78-redesign .capa69-kpis .capa69-kpi,
body.v77-redesign .capa69-kpis .capa69-kpi,
.capa69-kpis .capa69-kpi{
  position:relative;
  overflow:hidden;
  border-width:1px!important;
  border-style:solid!important;
  box-shadow:0 8px 22px rgba(15,23,42,.055)!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease!important;
}

.capa69-kpis .capa69-kpi::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  border-radius:14px 14px 0 0;
  pointer-events:none;
}

/* 1 — Total CAPAs: blue */
body.v78-redesign .capa69-kpis .capa69-kpi:nth-child(1),
body.v77-redesign .capa69-kpis .capa69-kpi:nth-child(1),
.capa69-kpis .capa69-kpi:nth-child(1){
  background:linear-gradient(145deg,#f4f9ff 0%,#edf6ff 100%)!important;
  border-color:#c8def5!important;
}
.capa69-kpis .capa69-kpi:nth-child(1)::before{background:#1677c8}
.capa69-kpis .capa69-kpi:nth-child(1) b{color:#0b5d98!important}
.capa69-kpis .capa69-kpi:nth-child(1) span{color:#416984!important}

/* 2 — Open: amber/orange */
body.v78-redesign .capa69-kpis .capa69-kpi:nth-child(2),
body.v77-redesign .capa69-kpis .capa69-kpi:nth-child(2),
.capa69-kpis .capa69-kpi:nth-child(2){
  background:linear-gradient(145deg,#fffaf1 0%,#fff4df 100%)!important;
  border-color:#f2d29b!important;
}
.capa69-kpis .capa69-kpi:nth-child(2)::before{background:#e58a00}
.capa69-kpis .capa69-kpi:nth-child(2) b{color:#b65a00!important}
.capa69-kpis .capa69-kpi:nth-child(2) span{color:#805a26!important}

/* 3 — Overdue: red/rose, even when the value is zero */
body.v78-redesign .capa69-kpis .capa69-kpi:nth-child(3),
body.v77-redesign .capa69-kpis .capa69-kpi:nth-child(3),
.capa69-kpis .capa69-kpi:nth-child(3){
  background:linear-gradient(145deg,#fff7f8 0%,#fff0f2 100%)!important;
  border-color:#f2c4cc!important;
}
.capa69-kpis .capa69-kpi:nth-child(3)::before{background:#d42043}
.capa69-kpis .capa69-kpi:nth-child(3) b{color:#be123c!important}
.capa69-kpis .capa69-kpi:nth-child(3) span{color:#914052!important}

/* 4 — Closed: green */
body.v78-redesign .capa69-kpis .capa69-kpi:nth-child(4),
body.v77-redesign .capa69-kpis .capa69-kpi:nth-child(4),
.capa69-kpis .capa69-kpi:nth-child(4){
  background:linear-gradient(145deg,#f4fcf7 0%,#ecf9f1 100%)!important;
  border-color:#bfe5ce!important;
}
.capa69-kpis .capa69-kpi:nth-child(4)::before{background:#15915a}
.capa69-kpis .capa69-kpi:nth-child(4) b{color:#087443!important}
.capa69-kpis .capa69-kpi:nth-child(4) span{color:#3f7157!important}

/* 5 — Completion Rate: teal */
body.v78-redesign .capa69-kpis .capa69-kpi:nth-child(5),
body.v77-redesign .capa69-kpis .capa69-kpi:nth-child(5),
.capa69-kpis .capa69-kpi:nth-child(5){
  background:linear-gradient(145deg,#f2fbfb 0%,#e9f8f8 100%)!important;
  border-color:#b9dddd!important;
}
.capa69-kpis .capa69-kpi:nth-child(5)::before{background:#078889}
.capa69-kpis .capa69-kpi:nth-child(5) b{color:#066f70!important}
.capa69-kpis .capa69-kpi:nth-child(5) span{color:#3b7071!important}

.capa69-kpis .capa69-kpi small{color:#607386!important}
.capa69-kpis .capa69-kpi.clickable:hover{
  transform:translateY(-2px)!important;
  filter:saturate(1.06)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.10)!important;
}

/* Keep the selected KPI obvious without replacing its semantic color. */
.capa69-kpis .capa69-kpi.selected{
  outline:2px solid rgba(8,121,194,.35)!important;
  outline-offset:1px;
  box-shadow:inset 0 -3px 0 #ff7a00,0 11px 26px rgba(8,121,194,.12)!important;
}

@media(max-width:720px){
  .capa69-kpis .capa69-kpi{min-height:100px}
}