/* HENDAR UALL-V86 — consolidated professional UX recovery.
 * This file is intentionally last in the cascade and preserves the approved
 * visual language while correcting geometry, overflow and responsive behavior.
 */

/* Context navigation: real icons, stable sizing and a clear selected state. */
#contextSubnav .context-subnav-item{
  display:grid!important;
  grid-template-columns:30px minmax(0,1fr)!important;
  align-items:center!important;
  gap:9px!important;
  min-width:172px!important;
  padding:7px 12px!important;
  text-align:start!important;
}
#contextSubnav .context-subnav-icon{
  display:grid!important;
  place-items:center!important;
  width:30px!important;
  height:30px!important;
  border:1px solid color-mix(in srgb,var(--tone,var(--af-navy)) 18%,var(--af-line))!important;
  border-radius:9px!important;
  background:color-mix(in srgb,var(--tone,var(--af-navy)) 8%,#fff)!important;
  color:var(--tone,var(--af-navy))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 10px rgba(15,42,67,.07)!important;
}
#contextSubnav .context-subnav-icon svg{
  width:16px!important;
  height:16px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#contextSubnav .context-subnav-label{
  display:block!important;
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#contextSubnav .context-subnav-item.active .context-subnav-icon{
  border-color:color-mix(in srgb,var(--tone,var(--af-navy)) 45%,transparent)!important;
  background:var(--tone,var(--af-navy))!important;
  color:#fff!important;
  box-shadow:0 6px 15px color-mix(in srgb,var(--tone,var(--af-navy)) 24%,transparent)!important;
}

/* Project list header: compact, intentional and free of dead space. */
#projectsView>.section-toolbar{
  display:grid!important;
  grid-template-columns:minmax(290px,1fr) minmax(420px,1.25fr)!important;
  align-items:center!important;
  gap:18px!important;
  min-height:0!important;
  padding:18px 22px!important;
}
#projectsView>.section-toolbar>.toolbar-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
}
#projectsView>.section-toolbar>.toolbar-actions>.button{
  width:auto!important;
  min-width:0!important;
  min-height:40px!important;
  padding:8px 13px!important;
  white-space:normal!important;
}
#projectsView>.filter-bar{margin-top:12px!important}

/* Approved executive KPI cards: one icon anchor and one content baseline. */
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{
  min-height:40px!important;
  padding-inline-start:45px!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon{
  inset:0 auto auto 0!important;
  width:38px!important;
  height:38px!important;
  border-radius:12px!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-icon svg{
  width:19px!important;
  height:19px!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage{
  inset:52% 14px auto!important;
  height:23%!important;
  align-items:center!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-kpi-value{
  align-self:center!important;
  overflow:visible!important;
  text-overflow:clip!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid :is(.hendar-v81-kpi-contract,.hendar-v81-kpi-finance) .hendar-v81-kpi-value{
  margin:0!important;
  font-size:clamp(14px,1.18vw,22px)!important;
  font-weight:550!important;
  letter-spacing:-.045em!important;
  line-height:1.1!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-count{
  margin:0!important;
  font-size:clamp(28px,2.5vw,42px)!important;
  line-height:1!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage :is(.hendar-v81-project-bars,.hendar-v81-paper-stack,.hendar-v81-risk-signal){
  justify-self:start!important;
  align-self:center!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-finance .hendar-v84-kpi-stage{
  align-content:center!important;
}
#dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v84-kpi-stage .hendar-v81-finance-meter{
  inset:auto 0 -11px!important;
}

/* Portfolio card: content determines height; metrics and action never clip. */
#dashboardView .executive-portfolio-card,
#dashboardView .portfolio-health-layout,
#dashboardView .portfolio-health-layout:has(.single-project-health-card){
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
}
#dashboardView .single-project-health-card{
  display:grid!important;
  grid-template-areas:"status status" "copy copy" "metrics metrics" "action action"!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-content:start!important;
  gap:10px!important;
  min-height:0!important;
  max-height:none!important;
  padding:16px 18px!important;
  overflow:hidden!important;
}
#dashboardView .single-project-health-card>.single-project-status{grid-area:status!important;justify-self:start!important}
#dashboardView .single-project-health-card>div{grid-area:copy!important}
#dashboardView .single-project-health-card>section{
  grid-area:metrics!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
}
#dashboardView .single-project-health-card>section>span{
  min-height:64px!important;
  padding:9px 11px!important;
  overflow:hidden!important;
}
#dashboardView .single-project-health-card>section>span>b{
  overflow-wrap:anywhere!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
#dashboardView .single-project-health-card>em{
  grid-area:action!important;
  min-height:38px!important;
  padding:7px 11px!important;
}

/* Project overview cards: subtle hierarchy, full numbers and safe wrapping. */
#projectWorkspaceContent .project-mini-metrics{
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr))!important;
  gap:10px!important;
}
#projectWorkspaceContent .project-mini-metric{
  position:relative!important;
  display:grid!important;
  align-content:start!important;
  gap:5px!important;
  min-width:0!important;
  min-height:126px!important;
  padding:15px 16px 13px!important;
  overflow:hidden!important;
  border:1px solid #dce6ee!important;
  border-radius:17px!important;
  background:linear-gradient(145deg,#fff 0%,#f8fbfd 100%)!important;
  box-shadow:0 8px 22px rgba(13,48,72,.055)!important;
  text-align:start!important;
}
#projectWorkspaceContent .project-mini-metric::before{
  content:""!important;
  position:absolute!important;
  inset-block:0!important;
  inset-inline-start:0!important;
  width:4px!important;
  background:linear-gradient(180deg,var(--workspace-primary,#2563eb),color-mix(in srgb,var(--workspace-secondary,#0f766e) 72%,#fff))!important;
}
#projectWorkspaceContent button.project-mini-metric{cursor:pointer!important;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important}
#projectWorkspaceContent button.project-mini-metric:hover{
  transform:translateY(-2px)!important;
  border-color:color-mix(in srgb,var(--workspace-primary,#2563eb) 28%,#dce6ee)!important;
  box-shadow:0 13px 28px rgba(13,48,72,.09)!important;
}
#projectWorkspaceContent .project-mini-metric>span{
  color:#738597!important;
  font-size:10px!important;
  font-weight:750!important;
}
#projectWorkspaceContent .project-mini-metric>strong{
  display:block!important;
  min-width:0!important;
  margin-top:4px!important;
  overflow:visible!important;
  color:#173650!important;
  font-size:clamp(16px,1.35vw,22px)!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:-.025em!important;
  direction:ltr!important;
  unicode-bidi:plaintext!important;
  text-align:start!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  font-variant-numeric:tabular-nums lining-nums!important;
}
#projectWorkspaceContent .project-mini-metric>small{font-size:9px!important;line-height:1.5!important}
#projectWorkspaceContent .project-card-open-hint{
  position:static!important;
  align-self:end!important;
  margin-top:auto!important;
  padding-top:7px!important;
  color:var(--workspace-primary,#2563eb)!important;
  font-size:9px!important;
  font-style:normal!important;
  font-weight:850!important;
}

/* In-place project navigation feedback without disturbing either scrollbar. */
#projectWorkspaceView .project-workspace-main{position:relative!important}
#projectWorkspaceView .project-workspace-main.project-content-updating::after{
  content:"جارٍ تحديث هذا القسم…"!important;
  position:sticky!important;
  z-index:40!important;
  top:12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:max-content!important;
  max-width:calc(100% - 24px)!important;
  min-height:34px!important;
  margin:-42px auto 8px!important;
  padding:6px 13px!important;
  border:1px solid #c9dce8!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.94)!important;
  color:#1b587d!important;
  box-shadow:0 8px 24px rgba(15,42,67,.12)!important;
  font-size:10px!important;
  font-weight:850!important;
  backdrop-filter:blur(8px)!important;
}

/* Employee identity workspace: exactly one scroll owner and no sticky overlap. */
#employeeIdCardModal.employee-id-workspace:not(.hidden){
  padding-bottom:18px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-padding-block:78px 24px!important;
}
#employeeIdCardModal.employee-id-workspace:not(.hidden) :is(#employeeIdDataForm,.employee-id-data-form,fieldset){
  max-height:none!important;
  overflow:visible!important;
}
#employeeIdCardModal.employee-id-workspace:not(.hidden) #employeeIdDataForm .form-actions,
#employeeIdCardModal.employee-id-workspace:not(.hidden) .employee-id-data-form .form-actions{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  grid-column:1/-1!important;
  width:100%!important;
  margin:4px 0 0!important;
  padding:10px 0 0!important;
  transform:none!important;
  background:transparent!important;
  box-shadow:none!important;
}
#employeeIdCardModal.employee-id-workspace:not(.hidden) #employeeIdCardPreview{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(270px,1fr))!important;
  align-items:start!important;
  gap:20px!important;
  width:100%!important;
  overflow:visible!important;
}

/* Equipment actions: readable command cells and non-overlapping controls. */
[data-hendar-equipment-active-host="1"] .uall-ae-equipment-register-table :is(th,td):last-child{
  width:300px!important;
  min-width:300px!important;
}
[data-hendar-equipment-active-host="1"] .uall-ae-equipment-register-table .uall-ae-pro-row-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
}
[data-hendar-equipment-active-host="1"] .uall-ae-equipment-register-table .uall-ae-pro-row-actions>:is(button,a){
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:40px!important;
  padding:7px 9px!important;
  overflow:visible!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  line-height:1.35!important;
}

/* Reports portfolio: daily, weekly and monthly cards share one robust layout. */
#reportsList,
#reportsList .reports-project-portfolio,
#reportsList .reports-project-shell,
#reportsList .reports-project-side-panel,
#reportsList .reports-type-grid,
#reportsList .reports-type-column,
#reportsList .reports-type-scroll,
#reportsList .report-portfolio-entry{min-width:0!important;max-width:100%!important}
#reportsList .reports-project-shell.expanded{overflow:visible!important}
#reportsList .reports-project-side-panel{overflow:hidden!important}
#reportsList .reports-type-grid{align-items:start!important}
#reportsList .reports-type-column{overflow:hidden!important}
#reportsList .reports-type-scroll{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-gutter:stable!important;
}
#reportsList .report-portfolio-entry.report-card{
  width:100%!important;
  padding:13px!important;
  overflow:hidden!important;
}
#reportsList .report-portfolio-entry .report-card-header{
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:9px!important;
}
#reportsList .report-portfolio-entry .report-card-header>div{min-width:0!important}
#reportsList .report-portfolio-entry .report-card-header :is(.eyebrow,h3){
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
#reportsList .report-approved-identity{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
#reportsList .report-approved-identity>span{
  min-width:0!important;
  padding:6px 8px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  font-size:9px!important;
  line-height:1.45!important;
}
#reportsList .report-portfolio-entry .report-footer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:9px!important;
  align-items:stretch!important;
}
#reportsList .report-portfolio-entry .report-footer>span{
  min-width:0!important;
  overflow-wrap:anywhere!important;
  font-size:9px!important;
}
#reportsList .report-portfolio-entry .report-footer .row-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
}
#reportsList .report-portfolio-entry .report-footer .row-action{
  width:100%!important;
  min-width:0!important;
  min-height:36px!important;
  padding:6px 8px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  font-size:9px!important;
  line-height:1.35!important;
}
#reportsList .report-portfolio-entry .review-state-note{grid-column:1/-1!important}

/* Real system settings workspace. */
#workspaceView:has(.system-settings-dashboard) #workspaceTable,
#workspaceView:has(.system-settings-form) #workspaceTable{
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.system-settings-dashboard,
.system-settings-form{
  display:grid!important;
  gap:18px!important;
  width:100%!important;
  min-width:0!important;
  padding:22px!important;
  border:1px solid var(--ds-border,#d8e3ec)!important;
  border-radius:20px!important;
  background:var(--ds-surface,#fff)!important;
  box-shadow:0 12px 30px rgba(12,41,62,.07)!important;
}
.system-settings-dashboard>header h3,
.system-settings-form-head h3{margin:4px 0!important;color:#142f46!important;font-size:clamp(20px,2vw,27px)!important}
.system-settings-dashboard>header p,
.system-settings-form-head p{max-width:780px!important;margin:0!important;color:#667b8c!important;line-height:1.7!important}
.system-settings-section-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:11px!important;
}
.system-settings-section-card{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  gap:3px 10px!important;
  min-width:0!important;
  min-height:112px!important;
  padding:14px!important;
  border:1px solid #dae5ec!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#fff,#f7fafc)!important;
  color:#17364d!important;
  text-align:start!important;
  cursor:pointer!important;
  box-shadow:0 7px 20px rgba(12,41,62,.045)!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease!important;
}
.system-settings-section-card:hover{transform:translateY(-2px)!important;border-color:#9fc5d8!important;box-shadow:0 12px 26px rgba(12,41,62,.08)!important}
.system-settings-section-card>span{
  grid-row:1/3!important;
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  border-radius:13px!important;
  background:#eaf4f8!important;
  color:#1d6f96!important;
  font-size:20px!important;
}
.system-settings-section-card>strong{min-width:0!important;font-size:12px!important;overflow-wrap:anywhere!important}
.system-settings-section-card>small{min-width:0!important;color:#7b8f9e!important;font-size:9px!important;line-height:1.45!important;overflow-wrap:anywhere!important}
.system-settings-form-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
}
.system-setting-toggle-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.system-setting-toggle{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  min-width:0!important;
  padding:13px!important;
  border:1px solid #dbe5ec!important;
  border-radius:13px!important;
  background:#f8fbfc!important;
}
.system-setting-toggle>input{width:19px!important;height:19px!important;margin-top:2px!important;accent-color:#1d6f96!important}
.system-setting-toggle>span{display:grid!important;gap:3px!important;min-width:0!important}
.system-setting-toggle strong{color:#1b3c54!important;font-size:11px!important}
.system-setting-toggle small{color:#718695!important;font-size:9px!important;line-height:1.5!important}
.integration-status-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}
.integration-status-grid>article{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  padding:15px!important;
  border:1px solid #dbe5ec!important;
  border-radius:14px!important;
  background:#f9fbfc!important;
}
.integration-status-grid>article>span{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:12px!important;background:#edf4f7!important;font-size:18px!important}
.integration-status-grid>article.ready{border-color:#b9ddcc!important;background:#f3fbf7!important}
.integration-status-grid>article.attention{border-color:#ead5a8!important;background:#fffaf0!important}
.integration-status-grid>article>div{display:grid!important;min-width:0!important}.integration-status-grid small{color:#748897!important}
.system-setting-date{font-size:clamp(11px,1vw,15px)!important;white-space:normal!important}

@media(max-width:1200px){
  #projectsView>.section-toolbar{grid-template-columns:1fr!important}
  #projectsView>.section-toolbar>.toolbar-actions{justify-content:flex-start!important}
  .system-settings-section-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:900px){
  #contextSubnav .context-subnav-item{min-width:168px!important}
  #employeeIdCardModal.employee-id-workspace:not(.hidden) #employeeIdCardPreview{grid-template-columns:1fr!important}
  #reportsList .reports-project-shell.expanded{display:block!important}
  #reportsList .reports-project-side-panel{border-inline-start:0!important;border-top:1px solid var(--ds-border,#d8e3ec)!important}
  .system-settings-section-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .system-setting-toggle-grid{grid-template-columns:1fr!important}
}

@media(max-width:760px){
  #contextSubnav .context-subnav-item{
    grid-template-columns:28px minmax(0,1fr)!important;
    min-width:min(78vw,255px)!important;
    padding:6px 11px!important;
  }
  #contextSubnav .context-subnav-icon{width:28px!important;height:28px!important}
  #dashboardView #metricsGrid.hendar-v81-kpi-grid .hendar-v81-kpi-head{padding-inline-start: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-v84-kpi-stage{inset:51% 8px auto!important;height:24%!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 .single-project-health-card>section{grid-template-columns:1fr!important}
  #projectWorkspaceContent .project-mini-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #projectWorkspaceContent .project-mini-metric{min-height:116px!important;padding:13px!important}
  #projectWorkspaceContent .project-mini-metric>strong{font-size:clamp(14px,4vw,19px)!important}
  #employeeIdCardModal.employee-id-workspace:not(.hidden){width:calc(100vw - 12px)!important;max-width:calc(100vw - 12px)!important;max-height:calc(100dvh - 12px)!important}
  [data-hendar-equipment-active-host="1"] .uall-ae-equipment-register-table :is(th,td):last-child{width:auto!important;min-width:0!important}
  #reportsList .reports-project-panel-head{display:grid!important;gap:10px!important}
  #reportsList .reports-project-panel-head .row-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  #reportsList .reports-type-grid{display:grid!important;grid-template-columns:1fr!important}
  #reportsList .reports-type-scroll{max-height:none!important;overflow:visible!important}
  #reportsList .report-portfolio-entry .report-card-header{grid-template-columns:32px minmax(0,1fr)!important}
  #reportsList .report-portfolio-entry .report-card-header>.status-pill{grid-column:2!important;justify-self:start!important}
  #reportsList .report-approved-identity{grid-template-columns:1fr!important}
  .system-settings-dashboard,.system-settings-form{padding:15px!important;border-radius:16px!important}
  .system-settings-form-head{align-items:stretch!important;flex-direction:column!important}
  .integration-status-grid{grid-template-columns:1fr!important}
}

@media(max-width:520px){
  #projectsView>.section-toolbar{padding:15px!important}
  #projectsView>.section-toolbar>.toolbar-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #projectsView>.section-toolbar>.toolbar-actions>.button{width:100%!important;min-height:42px!important;padding:7px!important}
  #projectWorkspaceContent .project-mini-metrics{grid-template-columns:1fr!important}
  #reportsList .report-portfolio-entry .report-footer .row-actions{grid-template-columns:1fr!important}
  .system-settings-section-grid{grid-template-columns:1fr!important}
  .system-settings-section-card{min-height:96px!important}
  .integration-status-grid>article{grid-template-columns:38px minmax(0,1fr)!important}
  .integration-status-grid>article>b{grid-column:2!important;justify-self:start!important}
}

@media(prefers-reduced-motion:reduce){
  #contextSubnav .context-subnav-item,
  #projectWorkspaceContent button.project-mini-metric,
  .system-settings-section-card{transition:none!important;transform:none!important}
}

@media print{
  #contextSubnav{display:none!important}
  #projectWorkspaceContent .project-mini-metric,
  .system-settings-dashboard,.system-settings-form{box-shadow:none!important}
}