/* HENDAR UALL-V89 — shared sticky shell and square executive KPI geometry.
 *
 * This layer is intentionally data-neutral. It preserves every KPI variant,
 * colour, label, value, decorative signal and click action supplied by the
 * existing renderer, while replacing only the unstable geometry.
 */

:root{
  --hendar-v89-topbar-height:var(--hdu-measured-topbar-height,var(--hdu-topbar-height,76px));
  --hendar-v89-subnav-height:0px;
  --hendar-v89-sticky-stack-height:var(--hendar-v89-topbar-height);
  --hendar-v89-kpi-gap:10px;
}

/* The authenticated document remains the vertical scroll owner. `clip` on the
 * inline axis avoids creating a non-scrolling overflow ancestor, which would
 * silently disable position:sticky in Chromium and WebKit. */
html[data-auth-surface="app"],
body.hendar-authenticated{
  scroll-padding-block-start:calc(var(--hendar-v89-sticky-stack-height) + 12px)!important;
}

.app-shell:not(.hidden),
.app-shell:not(.hidden)>.main-content{
  overflow:visible!important;
  overflow-x:clip!important;
  overflow-y:visible!important;
}

.app-shell:not(.hidden)>.main-content>.topbar{
  position:sticky!important;
  inset-block-start:0!important;
  top:0!important;
  z-index:1300!important;
  isolation:isolate!important;
  width:100%!important;
  margin-block:0!important;
}

#contextSubnav.context-subnav:not(.hidden){
  position:sticky!important;
  inset-block-start:var(--hendar-v89-topbar-height)!important;
  top:var(--hendar-v89-topbar-height)!important;
  z-index:1290!important;
  isolation:isolate!important;
  width:100%!important;
  margin-block:0!important;
}

#contextSubnav .context-subnav-empty{
  display:inline-flex!important;
  align-items:center!important;
  min-height:40px!important;
  padding-inline:14px!important;
  color:var(--muted,#667085)!important;
  font-size:.78rem!important;
  font-weight:700!important;
  white-space:nowrap!important;
}

/* Nested sticky toolbars belong below both persistent shell bars. This avoids
 * the HR tabs occupying top:0 and being hidden behind the global header. */
#hrView .hr-suite-tabs,
.uall-ae-pro-detail-nav,
.hendar-flex-grid-toolbar,
.report-boq-filterbar,
.project-picker-toolbar{
  top:calc(var(--hendar-v89-sticky-stack-height) + 8px)!important;
  inset-block-start:calc(var(--hendar-v89-sticky-stack-height) + 8px)!important;
  z-index:1180!important;
  scroll-margin-block-start:calc(var(--hendar-v89-sticky-stack-height) + 12px)!important;
}

/* Programmatic navigation and browser find/anchor jumps stop below both bars.
 * The bars themselves remain in normal flow, so ordinary page content does
 * not receive a duplicated fixed padding or a visible empty strip. */
.main-content>.view,
.main-content :is(section,article,form,div)[id]{
  scroll-margin-block-start:calc(var(--hendar-v89-sticky-stack-height) + 12px);
}

/* -------------------------------------------------------------------------
 * Executive KPI cards: one deterministic square system across all devices.
 * ---------------------------------------------------------------------- */

#dashboardView #metricsGrid.hendar-v81-kpi-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:auto!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  gap:var(--hendar-v89-kpi-gap)!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:12px 0 16px!important;
  padding:0!important;
  overflow:visible!important;
  direction:rtl!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid>.hendar-v81-kpi-shell{
  position:relative!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  container:hendarV89Kpi / inline-size;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:1 / 1!important;
  margin:0!important;
  padding:0!important;
  filter:none!important;
  transform:none!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-card{
  position:relative!important;
  inset:auto!important;
  isolation:isolate!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-rows:minmax(32px,28%) minmax(0,1fr) minmax(24px,21%)!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:stretch!important;
  align-content:stretch!important;
  justify-content:stretch!important;
  gap:clamp(2px,2.2cqi,7px)!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:clamp(8px,7.25cqi,18px)!important;
  overflow:hidden!important;
  text-align:right!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{
  position:relative!important;
  inset:auto!important;
  z-index:4!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  align-content:start!important;
  gap:clamp(4px,4cqi,10px)!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  direction:rtl!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:start!important;
  gap:2px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  direction:rtl!important;
  unicode-bidi:isolate!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-title{
  display:block!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  font-size:clamp(10px,8.5cqi,16px)!important;
  font-weight:600!important;
  line-height:1.28!important;
  text-align:right!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-currency{
  display:block!important;
  justify-self:start!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  font-size:clamp(7.5px,6.3cqi,11px)!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:.045em!important;
  direction:ltr!important;
  unicode-bidi:isolate!important;
  white-space:nowrap!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon{
  position:relative!important;
  inset:auto!important;
  z-index:5!important;
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  flex:none!important;
  width:clamp(30px,25cqi,48px)!important;
  height:clamp(30px,25cqi,48px)!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border-radius:clamp(9px,8cqi,14px)!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon svg{
  display:block!important;
  width:clamp(15px,12.5cqi,24px)!important;
  height:clamp(15px,12.5cqi,24px)!important;
  max-width:100%!important;
  max-height:100%!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage{
  position:relative!important;
  inset:auto!important;
  z-index:3!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:minmax(0,1fr)!important;
  align-items:center!important;
  align-content:center!important;
  justify-content:stretch!important;
  gap:clamp(3px,4cqi,10px)!important;
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding: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-v81-kpi-progress .hendar-v84-kpi-stage{
  grid-template-columns:minmax(0,1fr)!important;
  place-items:center!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-kpi-value{
  position:relative!important;
  inset:auto!important;
  z-index:3!important;
  grid-column:1!important;
  align-self:center!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  font-size:clamp(10px,8.8cqi,24px)!important;
  font-weight:600!important;
  font-variant-numeric:tabular-nums lining-nums!important;
  line-height:1.08!important;
  letter-spacing:-.045em!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 .hendar-v84-kpi-stage .hendar-v81-kpi-count{
  font-size:clamp(27px,22cqi,48px)!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:-.025em!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;
  grid-column:2!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  transform-origin:center!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-progress-ring{
  grid-column:1!important;
  width:clamp(36px,34cqi,58px)!important;
  height:clamp(36px,34cqi,58px)!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-progress-ring::before{
  width:74%!important;
  height:74%!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-progress-ring strong{
  font-size:clamp(10px,9.3cqi,16px)!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-project-bars{
  display:flex!important;
  align-items:flex-end!important;
  gap:clamp(2px,2.4cqi,4px)!important;
  width:auto!important;
  height:clamp(27px,25cqi,42px)!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-project-bars span{
  width:clamp(6px,6.5cqi,11px)!important;
  max-height:100%!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-paper-stack{
  width:clamp(39px,34cqi,54px)!important;
  height:clamp(34px,30cqi,47px)!important;
  transform:scale(.72)!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-risk-signal{
  width:clamp(12px,11cqi,17px)!important;
  height:clamp(12px,11cqi,17px)!important;
  transform:scale(.76)!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-finance-meter{
  position:relative!important;
  inset:auto!important;
  z-index:3!important;
  grid-column:1!important;
  align-self:end!important;
  display:grid!important;
  width:100%!important;
  height:clamp(3px,2.8cqi,5px)!important;
  margin:clamp(3px,3cqi,7px) 0 0!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-foot{
  position:relative!important;
  inset:auto!important;
  z-index:4!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:center!important;
  align-content:center!important;
  justify-content:stretch!important;
  gap:clamp(3px,4cqi,9px)!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:clamp(4px,4cqi,8px) 0 0!important;
  font-size:clamp(8px,6.6cqi,12px)!important;
  font-weight:450!important;
  line-height:1.18!important;
  direction:rtl!important;
}

#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-foot span{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  overflow:visible!important;
  text-align:start!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-overflow:clip!important;
}

#appShell.app-shell:not(.hidden) #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-foot span:last-child{
  display:block!important;
  text-align:end!important;
}

/* Tablet and compact desktop: three equal squares. */
@media(min-width:721px) and (max-width:1200px){
  #dashboardView #metricsGrid.hendar-v81-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

/* Phones and narrow tablets: two equal squares without horizontal scrolling. */
@media(min-width:321px) and (max-width:720px){
  :root{--hendar-v89-kpi-gap:8px}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Extremely narrow embedded/browser panes remain readable. */
@media(max-width:320px){
  :root{--hendar-v89-kpi-gap:8px}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* The smallest six-column desktop cards receive denser but complete bands.
 * Nothing is hidden: both footer details, the currency, icon and full value
 * remain present. */
@container hendarV89Kpi (max-width:155px){
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-card{
    grid-template-rows:minmax(30px,29%) minmax(0,1fr) minmax(23px,22%)!important;
    gap:2px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{
    gap:4px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage{
    gap:3px!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-paper-stack{
    transform:scale(.62)!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-risk-signal{
    transform:scale(.66)!important;
  }
}

@supports not (container-type:inline-size){
  @media(min-width:1201px) and (max-width:1440px){
    #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-card{
      padding:8px!important;
      gap:2px!important;
    }
    #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-title{font-size:10px!important}
    #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-currency{font-size:8px!important}
    #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon{width:30px!important;height:30px!important}
    #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-value{font-size:10px!important}
    #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-count{font-size:27px!important}
    #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-foot{font-size:8px!important}
  }
}

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

@media print{
  .app-shell:not(.hidden)>.main-content>.topbar,
  #contextSubnav.context-subnav{
    position:static!important;
    inset:auto!important;
  }
  #dashboardView #metricsGrid.hendar-v81-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}