/* HENDAR UALL-AF — cross-application interface recovery.
   This file is intentionally additive and must be loaded after the established
   application styles.  It changes presentation only; no business data rules. */

:root{
  --af-line:var(--ds-border,#d7e2eb);
  --af-surface:var(--ds-surface,#fff);
  --af-ink:var(--ds-text,#102a43);
  --af-muted:var(--ds-muted,#6b7f90);
  --af-navy:var(--ds-primary,#15527c);
  --af-topbar-height:76px;
  --af-subnav-height:52px;
}

/* 1. Sidebar: main destinations only, compact and direct. */
.sidebar{
  overflow:hidden!important;
}
.sidebar .sidebar-brand{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px auto!important;
  align-items:center!important;
  gap:10px!important;
  direction:rtl!important;
  min-height:84px!important;
  padding:12px 14px!important;
}
.sidebar .sidebar-brand-copy{
  grid-column:1!important;
  grid-row:1!important;
  display:grid!important;
  justify-items:start!important;
  min-width:0!important;
  text-align:right!important;
  line-height:1.05!important;
}
.sidebar .sidebar-brand-mark{
  grid-column:2!important;
  grid-row:1!important;
  width:52px!important;
  height:52px!important;
  margin:0!important;
}
.sidebar .sidebar-brand-mark img{width:52px!important;height:52px!important}
.sidebar .sidebar-close-button{
  grid-column:3!important;
  grid-row:1!important;
  margin:0!important;
}
.sidebar .sidebar-brand-copy strong{font-size:17px!important;white-space:nowrap!important}
.sidebar .sidebar-brand-copy span{font-size:9px!important;letter-spacing:.16em!important;white-space:nowrap!important}
.sidebar .sidebar-brand-copy small{margin-top:4px!important;font-size:9px!important;white-space:nowrap!important}
.sidebar .sidebar-tools{flex:0 0 auto!important}
.sidebar .main-nav{
  display:flex!important;
  flex:1 1 auto!important;
  min-height:0!important;
  flex-direction:column!important;
  gap:4px!important;
  align-content:initial!important;
  padding:5px 9px 10px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
}
.sidebar .main-nav>.nav-group{
  flex:0 0 auto!important;
  width:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:11px!important;
  background:transparent!important;
  box-shadow:none!important;
}
.sidebar .main-nav .nav-group-items,
.sidebar .main-nav :is(.group-count,.group-chevron,.nav-group-chevron,[data-nav-chevron]){
  display:none!important;
}
.sidebar .main-nav .nav-group-toggle,
.sidebar .main-nav .nav-root-item{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  width:100%!important;
  height:50px!important;
  min-height:50px!important;
  max-height:50px!important;
  margin:0!important;
  padding:7px 9px!important;
  overflow:hidden!important;
  border:1px solid rgba(183,210,227,.13)!important;
  border-radius:11px!important;
  background:rgba(4,25,45,.16)!important;
  box-shadow:none!important;
  color:rgba(238,247,251,.84)!important;
  text-align:start!important;
  cursor:pointer!important;
}
.sidebar .main-nav .nav-group-toggle:hover,
.sidebar .main-nav .nav-root-item:hover{
  border-color:rgba(var(--group-rgb,58,157,188),.44)!important;
  background:rgba(var(--group-rgb,58,157,188),.1)!important;
  color:#fff!important;
}
.sidebar .main-nav .nav-group-toggle[aria-current="page"],
.sidebar .main-nav .nav-root-item[aria-current="page"]{
  border-color:rgba(var(--group-rgb,58,157,188),.62)!important;
  background:linear-gradient(100deg,rgba(var(--group-rgb,58,157,188),.2),rgba(var(--group-rgb,58,157,188),.045))!important;
  box-shadow:inset -3px 0 0 var(--group-tone,#36a4c5)!important;
  color:#fff!important;
}
.sidebar .main-nav .group-code{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  border-radius:9px!important;
  font-size:9px!important;
}
.sidebar .main-nav .group-copy{min-width:0!important;overflow:hidden!important;line-height:1.13!important}
.sidebar .main-nav .group-copy :is(strong,small){
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.sidebar .main-nav .group-copy strong{font-size:11.5px!important;color:inherit!important}
.sidebar .main-nav .group-copy small{margin-top:3px!important;font-size:7.5px!important;letter-spacing:.07em!important;color:rgba(222,237,246,.48)!important}
.sidebar-collapsed .sidebar-brand-copy{display:none!important}
.sidebar-collapsed .sidebar-brand{grid-template-columns:52px!important;justify-content:center!important}
.sidebar-collapsed .sidebar-brand-mark{grid-column:1!important}
.sidebar-collapsed .main-nav .nav-group-toggle,
.sidebar-collapsed .main-nav .nav-root-item{grid-template-columns:34px!important;justify-content:center!important;padding-inline:5px!important}
.sidebar-collapsed .main-nav .group-copy{display:none!important}

/* 2. Horizontal module navigation: one measured row below the application bar. */
#contextSubnav.context-subnav{
  position:sticky!important;
  top:var(--af-topbar-height)!important;
  z-index:70!important;
  display:grid!important;
  grid-template-columns:minmax(130px,180px) minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  width:100%!important;
  height:var(--af-subnav-height)!important;
  min-height:var(--af-subnav-height)!important;
  max-height:var(--af-subnav-height)!important;
  margin:0!important;
  padding:6px 16px!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:1px solid var(--af-line)!important;
  background:color-mix(in srgb,var(--af-surface) 95%,transparent)!important;
  box-shadow:0 5px 14px rgba(15,42,67,.045)!important;
  backdrop-filter:blur(16px)!important;
}
#contextSubnav.context-subnav.hidden{display:none!important}
#contextSubnav .context-subnav-heading{
  display:grid!important;
  align-content:center!important;
  gap:1px!important;
  min-width:0!important;
  line-height:1.1!important;
}
#contextSubnav .context-subnav-heading :is(strong,small){overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#contextSubnav .context-subnav-heading strong{font-size:12px!important;color:var(--af-ink)!important}
#contextSubnav .context-subnav-heading small{font-size:8px!important;color:var(--af-muted)!important;letter-spacing:.06em!important}
#contextSubnav .context-subnav-items{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  height:40px!important;
  padding:1px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin!important;
  scroll-snap-type:x proximity!important;
}
#contextSubnav .context-subnav-item{
  flex:0 0 auto!important;
  scroll-snap-align:start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  height:36px!important;
  min-height:36px!important;
  padding:6px 12px!important;
  border:1px solid var(--af-line)!important;
  border-radius:10px!important;
  background:var(--af-surface)!important;
  color:var(--af-muted)!important;
  box-shadow:none!important;
  font-size:10.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
  word-break:normal!important;
}
#contextSubnav .context-subnav-item.active{
  border-color:var(--tone,var(--af-navy))!important;
  background:color-mix(in srgb,var(--tone,var(--af-navy)) 8%,var(--af-surface))!important;
  box-shadow:inset 0 -3px 0 var(--tone,var(--af-navy))!important;
  color:var(--af-ink)!important;
}

/* 3. Restore document and dialog scrolling, and keep editors above navigation. */
html{scroll-behavior:smooth;overflow-x:hidden!important;overflow-y:auto!important}
body{min-height:100dvh!important;overflow-x:hidden!important}
.app-shell:not(.hidden),.main-content{min-height:100dvh!important;min-width:0!important}
.main-content{overflow-x:hidden!important;overflow-y:visible!important}
.view:not([hidden]),.workspace-view:not([hidden]){min-width:0!important;overflow:visible!important}
.table-card,.table-scroll,.data-table-wrap,.workspace-table,.boq-grid-wrap{
  min-width:0!important;
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-gutter:stable!important;
}
#modalBackdrop.modal-backdrop,.modal-backdrop{
  z-index:20000!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-height:100dvh!important;
  padding:12px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
}
#modalBackdrop>.modal,.modal-backdrop>.modal,.modal:not(.hidden){
  z-index:20001!important;
  max-width:calc(100vw - 24px)!important;
  max-height:calc(100dvh - 24px)!important;
  min-height:0!important;
}
.modal:not(.hidden){overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important}
.modal>.modal-header{flex:0 0 auto!important}
.modal>:is(form,.modal-body,.theme-studio-body,.modal-content){min-height:0!important;overflow-x:hidden!important;overflow-y:auto!important}
.modal .form-actions{position:sticky!important;bottom:0!important;z-index:20!important}
body:has(.modal-backdrop:not(.hidden)){overflow:hidden!important}

/* 4. Compact data grids without breaking Arabic words into single letters. */
table{border-collapse:separate!important;border-spacing:0!important}
table :is(th,td){
  height:auto!important;
  min-height:0!important;
  padding:9px 10px!important;
  vertical-align:middle!important;
  line-height:1.45!important;
  word-break:normal!important;
  overflow-wrap:break-word!important;
  hyphens:none!important;
}
table th{white-space:normal!important}
table td :is(button,.button,.row-action),
.row-actions :is(button,.button,.row-action){
  min-height:32px!important;
  height:auto!important;
  padding:6px 9px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
}
table tbody tr{height:auto!important;min-height:0!important}
.row-actions{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr))!important;
  align-items:stretch!important;
  gap:5px!important;
  width:100%!important;
  max-width:none!important;
}
#employeesTable,#projectEmployeesTable,#hrPayrollTable{padding:8px!important;overflow-x:auto!important}
#employeesTable table,#projectEmployeesTable table,#hrPayrollTable table{
  width:100%!important;
  max-width:1380px!important;
  margin-inline:auto!important;
  table-layout:fixed!important;
}
#employeesTable table :is(th,td),#projectEmployeesTable table :is(th,td),#hrPayrollTable table :is(th,td){padding:8px 9px!important}
#employeesTable table td:last-child,#projectEmployeesTable table td:last-child,#hrPayrollTable table td:last-child{width:32%!important;overflow:visible!important}
#employeesTable .row-actions,#projectEmployeesTable .row-actions{grid-template-columns:repeat(4,minmax(86px,1fr))!important}
#hrPayrollTable .row-actions{grid-template-columns:repeat(2,minmax(104px,1fr))!important}

/* 5. File controls: a single compact control, never a clipped native button. */
.hendar-file-control,.af-file-control{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  width:100%!important;
  max-width:100%!important;
  min-height:46px!important;
  height:auto!important;
  padding:5px 7px!important;
  overflow:hidden!important;
  border:1px dashed var(--af-line)!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--af-navy) 3%,var(--af-surface))!important;
}
.hendar-file-control input[type="file"],.af-file-control input[type="file"]{
  position:absolute!important;
  inset:auto!important;
  width:1px!important;
  height:1px!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  clip-path:inset(50%)!important;
}
.hendar-file-button,.af-file-button{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  height:34px!important;
  padding:6px 12px!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--af-navy)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:10.5px!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.hendar-file-name,.af-file-name{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--af-muted)!important;
  font-size:10.5px!important;
}
.hendar-file-remove,.af-file-remove{
  flex:0 0 auto!important;
  min-height:32px!important;
  padding:5px 10px!important;
  border:1px solid color-mix(in srgb,#b42318 30%,var(--af-line))!important;
  border-radius:9px!important;
  background:color-mix(in srgb,#b42318 6%,var(--af-surface))!important;
  color:#9f1c17!important;
  font:800 10px Cairo,Tajawal,sans-serif!important;
}
.hendar-file-remove[hidden],.af-file-remove[hidden]{display:none!important}
.af-native-file-host,.hendar-custom-file-host{cursor:pointer!important}
.af-native-file-host input[type="file"],.hendar-custom-file-host input[type="file"]{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  opacity:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
  clip-path:inset(50%)!important;
}

/* 6. Currency belongs to the heading. Numeric cells remain clean. */
.hendar-currency-heading{
  display:inline-flex!important;
  align-items:center!important;
  margin-inline-start:5px!important;
  padding:2px 5px!important;
  border-radius:5px!important;
  background:color-mix(in srgb,var(--af-navy) 8%,transparent)!important;
  color:var(--af-muted)!important;
  font-size:.72em!important;
  font-weight:800!important;
  direction:ltr!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
}

/* 7. Approved HENDAR structural KPI cards, bound to the real metrics grid. */
#dashboardView #metricsGrid.enterprise-metrics-grid,
#dashboardView #metricsGrid.hendar-evolved-metrics-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-template-rows:auto!important;
  align-items:stretch!important;
  gap:14px!important;
  min-width:0!important;
  margin:12px 0 16px!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  background:none!important;
  box-shadow:none!important;
  direction:rtl!important;
}
#dashboardView #metricsGrid>.hendar-evolved-kpi-shell{
  position:relative!important;
  isolation:isolate!important;
  width:100%!important;
  min-width:0!important;
  height:162px!important;
  margin:0!important;
  padding:0!important;
  filter:drop-shadow(0 11px 13px rgba(8,38,60,.1))!important;
  transform:none!important;
  transition:transform .2s ease,filter .2s ease!important;
}
#dashboardView #metricsGrid>.hendar-evolved-kpi-shell::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:5px -4px -4px 5px!important;
  background:rgba(var(--metric-rgb),.22)!important;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))!important;
  pointer-events:none!important;
}
#dashboardView #metricsGrid>.hendar-evolved-kpi-shell:hover,
#dashboardView #metricsGrid>.hendar-evolved-kpi-shell:focus-within{
  transform:translateY(-3px)!important;
  filter:drop-shadow(0 15px 18px rgba(8,38,60,.14))!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-card{
  position:relative!important;
  z-index:1!important;
  isolation:isolate!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  appearance:none!important;
  border:1px solid color-mix(in srgb,var(--metric-tone) 18%,var(--af-line))!important;
  border-radius:0!important;
  background:
    linear-gradient(130deg,rgba(var(--metric-rgb),.035),transparent 48%),
    linear-gradient(155deg,var(--af-surface),color-mix(in srgb,var(--af-surface) 91%,#eaf2f6))!important;
  box-shadow:none!important;
  color:var(--af-ink)!important;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))!important;
  cursor:pointer!important;
  text-align:right!important;
  transform:none!important;
  transition:border-color .18s ease!important;
  font-family:var(--ds-font,"Cairo","Segoe UI",Tahoma,Arial,sans-serif)!important;
  font-synthesis:none!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-card:hover{
  transform:none!important;
  border-color:color-mix(in srgb,var(--metric-tone) 48%,var(--af-line))!important;
  box-shadow:none!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-card:focus-visible{
  outline:2px solid color-mix(in srgb,var(--metric-tone) 78%,#fff)!important;
  outline-offset:-4px!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:0!important;
  inset:43px 0 0!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  opacity:.32!important;
  background-image:
    linear-gradient(rgba(66,112,142,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(66,112,142,.07) 1px,transparent 1px),
    linear-gradient(124deg,transparent 64%,rgba(var(--metric-rgb),.1) 64% 64.6%,transparent 64.6%)!important;
  background-size:18px 18px,18px 18px,100% 100%!important;
  background-position:0 0!important;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%)!important;
  mask-image:linear-gradient(90deg,#000,transparent 70%)!important;
  pointer-events:none!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:4!important;
  inset-block:18px!important;
  inset-inline-start:0!important;
  width:4px!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(180deg,var(--metric-tone),rgba(var(--metric-rgb),.28))!important;
  pointer-events:none!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-beam{
  position:absolute!important;
  z-index:2!important;
  inset:0 0 auto 59px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  height:43px!important;
  min-height:43px!important;
  margin:0!important;
  padding:0 14px 0 18px!important;
  overflow:hidden!important;
  border:0!important;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 45%),
    linear-gradient(135deg,#123c59,#08273e)!important;
  color:#f6f9fb!important;
  clip-path:polygon(0 0,100% 0,100% 100%,15px 100%)!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-title{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  color:#f6f9fb!important;
  font-size:clamp(9px,.62vw,11.5px)!important;
  font-weight:650!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-currency{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  padding:0 8px 0 0!important;
  border:0!important;
  border-inline-start:1px solid rgba(255,255,255,.17)!important;
  border-radius:0!important;
  background:transparent!important;
  color:color-mix(in srgb,var(--metric-tone) 72%,#fff)!important;
  font-size:9px!important;
  font-weight:750!important;
  line-height:1!important;
  letter-spacing:.06em!important;
  direction:ltr!important;
  white-space:nowrap!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-icon{
  position:absolute!important;
  z-index:4!important;
  top:10px!important;
  left:12px!important;
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  height:42px!important;
  margin:0!important;
  padding:0!important;
  color:var(--metric-tone)!important;
  border:1px solid rgba(var(--metric-rgb),.32)!important;
  border-radius:0!important;
  background:
    linear-gradient(145deg,rgba(var(--metric-rgb),.16),rgba(var(--metric-rgb),.05)),
    #fafdff!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.72)!important;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-icon::before,
#dashboardView #metricsGrid .hendar-evolved-kpi-icon::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  width:4px!important;
  height:4px!important;
  border-radius:50%!important;
  background:currentColor!important;
  opacity:.45!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-icon::before{top:5px!important;right:5px!important}
#dashboardView #metricsGrid .hendar-evolved-kpi-icon::after{bottom:5px!important;left:5px!important}
#dashboardView #metricsGrid .hendar-evolved-kpi-icon svg{
  width:20px!important;
  height:20px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.75!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-content{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  grid-template-rows:1fr auto!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:52px 14px 11px!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-value-area{
  align-self:center!important;
  display:block!important;
  min-width:0!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-value-row{
  display:flex!important;
  align-items:baseline!important;
  gap:7px!important;
  min-width:0!important;
  margin:0!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-value-row>strong{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  color:#0a2a42!important;
  font-size:31px!important;
  font-weight:950!important;
  line-height:1!important;
  letter-spacing:-.045em!important;
  direction:ltr!important;
  unicode-bidi:plaintext!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-value-row>b{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  color:#17364e!important;
  font-size:10px!important;
  font-weight:750!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-value-area>small{
  display:block!important;
  min-width:0!important;
  margin:6px 0 0!important;
  overflow:hidden!important;
  color:var(--af-muted)!important;
  font-size:9.5px!important;
  font-weight:650!important;
  line-height:1.35!important;
  opacity:1!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-footer{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-width:0!important;
  margin:0!important;
  padding-top:8px!important;
  border-top:1px solid rgba(var(--metric-rgb),.15)!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-source{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  color:color-mix(in srgb,var(--metric-tone) 80%,#0a2a42)!important;
  font-size:8.5px!important;
  font-weight:850!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-source::before{
  content:""!important;
  display:inline-block!important;
  width:5px!important;
  height:5px!important;
  margin-inline-end:6px!important;
  border:1px solid currentColor!important;
  transform:rotate(45deg)!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-index{
  display:block!important;
  flex:0 0 auto!important;
  margin:0!important;
  color:#8191a0!important;
  font-size:8px!important;
  font-weight:700!important;
  line-height:1.2!important;
  letter-spacing:.12em!important;
  direction:ltr!important;
  white-space:nowrap!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-index>b{
  color:var(--metric-tone)!important;
  font-weight:900!important;
}
#dashboardView #metricsGrid .hendar-evolved-kpi-track{
  position:absolute!important;
  z-index:5!important;
  right:0!important;
  bottom:0!important;
  display:block!important;
  width:44%!important;
  height:3px!important;
  margin:0!important;
  background:linear-gradient(90deg,transparent,rgba(var(--metric-rgb),.25),var(--metric-tone))!important;
  pointer-events:none!important;
}
/* Keep the dashboard introduction useful but compact. */
#dashboardView .enterprise-command-hero{
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr)!important;
  min-height:0!important;
  padding:20px 22px!important;
  gap:18px!important;
  border-radius:21px!important;
}
#dashboardView .enterprise-command-copy h2{font-size:clamp(24px,2.2vw,34px)!important}
#dashboardView .enterprise-command-actions{margin-top:12px!important}
#dashboardView .enterprise-health-stage{grid-template-columns:108px minmax(0,1fr)!important;gap:12px!important;padding:12px!important}
#dashboardView .enterprise-health-gauge{width:108px!important;height:108px!important}
#dashboardView .enterprise-health-gauge::before{inset:13px!important}
#dashboardView .enterprise-health-gauge b{font-size:25px!important}

/* Portfolio card and performance chart: no clipped actions or overlapping labels. */
#dashboardView .executive-portfolio-card,
#dashboardView .portfolio-health-layout,
#dashboardView .performance-profile-card,
#dashboardView .enterprise-trend-panel{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
#dashboardView .portfolio-health-layout:has(.single-project-health-card){display:block!important;margin-top:12px!important}
#dashboardView .single-project-health-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:11px!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  padding:18px 20px!important;
  overflow:visible!important;
  border:1px solid color-mix(in srgb,var(--project-color) 25%,var(--af-line))!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--project-color) 7%,#fff),#fff)!important;
}
#dashboardView .single-project-health-card>div{min-width:0!important}
#dashboardView .single-project-health-card>div strong{
  display:block!important;
  max-width:100%!important;
  font-size:clamp(18px,2vw,27px)!important;
  line-height:1.28!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
}
#dashboardView .single-project-health-card>section{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
#dashboardView .single-project-health-card>section span{min-width:0!important;padding:10px!important}
#dashboardView .single-project-health-card>em{display:block!important;position:static!important;margin-top:3px!important;overflow:visible!important}
#dashboardView .portfolio-trend-chart{
  display:grid!important;
  grid-template-rows:minmax(185px,1fr) 62px!important;
  gap:16px!important;
  height:300px!important;
  min-height:300px!important;
  overflow:visible!important;
}
#dashboardView .portfolio-trend-bars{min-height:185px!important;padding:20px 8px 13px!important;overflow:visible!important}
#dashboardView .portfolio-trend-column{min-height:0!important}
#dashboardView .portfolio-trend-column small{display:block!important;min-height:16px!important;line-height:1.2!important;white-space:nowrap!important}
#dashboardView .portfolio-trend-summary{
  position:static!important;
  transform:none!important;
  display:grid!important;
  place-content:center!important;
  min-height:62px!important;
  margin:0!important;
  padding-top:4px!important;
  border-top:1px solid var(--af-line)!important;
}
#dashboardView .portfolio-trend-summary b{font-size:26px!important;line-height:1!important}

@media(max-width:1380px){
  #dashboardView #metricsGrid.enterprise-metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:980px){
  #contextSubnav.context-subnav{top:var(--af-topbar-height)!important;grid-template-columns:minmax(0,1fr)!important;padding-inline:10px!important}
  #contextSubnav .context-subnav-heading{display:none!important}
  #dashboardView .enterprise-command-hero{grid-template-columns:1fr!important}
  #dashboardView #metricsGrid.enterprise-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #employeesTable table,#projectEmployeesTable table,#hrPayrollTable table{min-width:900px!important}
}
@media(max-width:680px){
  #modalBackdrop.modal-backdrop,.modal-backdrop{align-items:flex-end!important;padding:0!important}
  #modalBackdrop>.modal,.modal-backdrop>.modal,.modal:not(.hidden){width:100%!important;max-width:100%!important;max-height:94dvh!important;border-radius:20px 20px 0 0!important}
  #dashboardView #metricsGrid.enterprise-metrics-grid{grid-template-columns:1fr!important;gap:11px!important}
  #dashboardView .enterprise-health-stage{grid-template-columns:1fr!important}
  #dashboardView .single-project-health-card{grid-template-columns:1fr!important;padding:15px!important}
  #dashboardView .single-project-health-card>section{grid-template-columns:1fr!important}
  .sidebar .sidebar-brand{grid-template-columns:minmax(0,1fr) 50px auto!important}
}

@media(prefers-reduced-motion:reduce){
  #dashboardView #metricsGrid>.hendar-evolved-kpi-shell,
  #dashboardView #metricsGrid .hendar-evolved-kpi-card{transition:none!important}
}

@media print{
  #contextSubnav.context-subnav{display:none!important}
  #dashboardView #metricsGrid.enterprise-metrics-grid{grid-template-columns:repeat(3,1fr)!important}
}