/* HENDAR UALL-V87 — deterministic executive KPI-card geometry.
 * The three content bands are anchored independently so legacy flex rules,
 * font metrics and card width cannot pull the heading into the card centre.
 */

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-card{
  position:relative!important;
  display:block!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  box-sizing:border-box!important;
  padding:0!important;
}

/* Heading band: the icon is always in the physical top-left corner, matching
 * the approved expenses card, while Arabic copy keeps a clean right anchor. */
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{
  position:absolute!important;
  z-index:4!important;
  inset:22px 18px auto!important;
  display:block!important;
  width:auto!important;
  height:52px!important;
  min-height:52px!important;
  margin:0!important;
  padding:2px 0 0 62px!important;
  overflow:visible!important;
  text-align:right!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-heading-copy{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-content:start!important;
  justify-items:end!important;
  gap:2px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  direction:rtl!important;
  unicode-bidi:isolate!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-title{
  display:block!important;
  min-width:0!important;
  color:#5f7783!important;
  font-size:clamp(13px,.92vw,18px)!important;
  font-weight:600!important;
  line-height:1.35!important;
  text-align:right!important;
  white-space:normal!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-currency{
  display:block!important;
  justify-self:end!important;
  margin:0!important;
  padding:0!important;
  font-size:11px!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:.055em!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  white-space:nowrap!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon{
  position:absolute!important;
  z-index:5!important;
  inset:0 auto auto 0!important;
  display:grid!important;
  place-items:center!important;
  width:52px!important;
  height:52px!important;
  margin:0!important;
  border-radius:15px!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon svg{
  width:25px!important;
  height:25px!important;
}

/* Data band: bottom anchoring keeps every value on one optical baseline and
 * leaves a deliberate, equal gap above the footer divider. */
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage{
  position:absolute!important;
  z-index:3!important;
  inset:auto 18px 52px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 58px!important;
  align-items:center!important;
  align-content:center!important;
  gap:10px!important;
  width:auto!important;
  height:88px!important;
  min-height:0!important;
  margin:0!important;
  direction:rtl!important;
  pointer-events:none!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid :is(.hendar-v81-kpi-contract,.hendar-v81-kpi-finance) .hendar-v84-kpi-stage{
  grid-template-columns:minmax(0,1fr)!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-kpi-value{
  grid-column:1!important;
  align-self:center!important;
  justify-self:stretch!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  overflow:visible!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  line-height:1!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  text-align:right!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid :is(.hendar-v81-kpi-contract,.hendar-v81-kpi-finance) .hendar-v81-kpi-value{
  font-size:clamp(17px,1.18vw,23px)!important;
  font-weight:600!important;
  letter-spacing:-.045em!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-count{
  font-size:clamp(34px,2.45vw,46px)!important;
  font-weight:500!important;
  line-height:1!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage :is(.hendar-v81-progress-ring,.hendar-v81-project-bars,.hendar-v81-paper-stack,.hendar-v81-risk-signal){
  position:relative!important;
  inset:auto!important;
  justify-self:start!important;
  align-self:center!important;
  margin:0!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage :is(.hendar-v81-project-bars,.hendar-v81-paper-stack,.hendar-v81-risk-signal){
  grid-column:2!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-progress .hendar-v81-progress-ring{
  grid-column:1 / -1!important;
  justify-self:start!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-finance-meter{
  position:absolute!important;
  inset:auto 0 0!important;
  direction:rtl!important;
  height:5px!important;
  margin:0!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-finance-meter span:nth-child(1){grid-column:1!important}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-finance-meter span:nth-child(2){grid-column:2!important}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-finance-meter span:nth-child(3){grid-column:3!important}

/* Footer band: one divider and one baseline across the complete row. */
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-foot{
  position:absolute!important;
  z-index:4!important;
  inset:auto 18px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  width:auto!important;
  min-height:36px!important;
  margin:0!important;
  padding:7px 0 0!important;
  font-size:13px!important;
  font-weight:450!important;
  line-height:1.25!important;
}

/* Define every edge explicitly; an older logical-inset accent rule otherwise
 * over-constrains this ornament and can move it between browsers. */
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-contract::after{
  inset:-20px -10px auto auto!important;
  inset-block-start:-20px!important;
  inset-block-end:auto!important;
  inset-inline-start:-10px!important;
  inset-inline-end:auto!important;
  width:150px!important;
  height:150px!important;
  inline-size:150px!important;
  block-size:150px!important;
  z-index:0!important;
}

/* With the desktop sidebar open, six square cards become too narrow on common
 * laptop widths.  Use a deliberate 3x2 composition until the content rail is
 * wide enough for a collision-free six-card row. */
@media(min-width:1201px) and (max-width:1760px){
  #dashboardView #metricsGrid.hendar-v81-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,360px))!important;
    justify-content:center!important;
    gap:12px!important;
  }
}

@media(max-width:1200px){
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{
    inset:12px 12px auto!important;
    height:34px!important;
    min-height:34px!important;
    padding:1px 0 0 40px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon{
    width:34px!important;
    height:34px!important;
    border-radius:11px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon svg{width:17px!important;height:17px!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-title{font-size:12px!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-currency{font-size:9px!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage{
    inset:auto 12px 43px!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    gap:6px!important;
    height:64px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid :is(.hendar-v81-kpi-contract,.hendar-v81-kpi-finance) .hendar-v81-kpi-value{
    font-size:clamp(13px,1.45vw,18px)!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-count{font-size:clamp(29px,3vw,38px)!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-foot{
    inset:auto 12px 8px!important;
    min-height:25px!important;
    padding-top:6px!important;
    font-size:11px!important;
  }
}

@media(max-width:620px){
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{
    inset:8px 8px auto!important;
    height:29px!important;
    min-height:29px!important;
    padding:0 0 0 34px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon{
    width:29px!important;
    height:29px!important;
    border-radius:9px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon svg{width:15px!important;height:15px!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-heading-copy{gap:1px!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-title{font-size:clamp(8.5px,2.45vw,10px)!important;line-height:1.18!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-currency{font-size:7.5px!important;line-height:1!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage{
    inset:auto 8px 29px!important;
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:4px!important;
    height:38px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid :is(.hendar-v81-kpi-contract,.hendar-v81-kpi-finance) .hendar-v81-kpi-value{
    font-size:clamp(9px,2.8vw,13px)!important;
    letter-spacing:-.055em!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-count{font-size:clamp(24px,7vw,31px)!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-foot{
    inset:auto 8px 5px!important;
    min-height:20px!important;
    padding-top:5px!important;
    font-size:10px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-foot span:last-child{display:none!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-finance-meter{height:4px!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-paper-stack{
    width:42px!important;
    height:38px!important;
    transform:scale(.68)!important;
    transform-origin:center!important;
  }
}

@media(max-width:380px){
  #dashboardView #metricsGrid.hendar-v81-kpi-grid>.hendar-v81-kpi-shell{
    aspect-ratio:4 / 5!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-card{transition:none!important}
}