/* HENDAR UALL-V89 — shared report-card geometry and intelligent horizontal navigation.
 * This file is intentionally additive: it corrects the V88 base components without
 * changing report data, statuses, actions, colours, or navigation destinations.
 */

:root{
  --hendar-edge-zone:64px;
  --hendar-edge-cue-z:1295;
  --hendar-report-gap:10px;
}

/* --------------------------------------------------------------------------
 * Daily / weekly / monthly reports — one shared, content-driven card 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,
#reportsList .report-portfolio-entry *{
  box-sizing:border-box;
}

#reportsList .reports-project-side-panel,
#reportsList .reports-type-grid,
#reportsList .reports-type-column,
#reportsList .reports-type-scroll,
#reportsList .report-portfolio-entry{
  min-inline-size:0!important;
  max-inline-size:100%!important;
}

#reportsList .reports-type-column{
  container-type:inline-size;
  container-name:hendar-report-column;
}

#reportsList .reports-type-scroll{
  inline-size:100%!important;
  overflow-x:hidden!important;
  overscroll-behavior-inline:none!important;
}

#reportsList .report-portfolio-entry.report-card{
  container-type:inline-size;
  container-name:hendar-report-card;
  display:block!important;
  inline-size:100%!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  block-size:auto!important;
  min-block-size:0!important;
  padding:14px!important;
  overflow:visible!important;
}

/* The approved accent is a real border, not an absolutely-positioned overlay. */
#reportsList .report-portfolio-entry.approved-collapsed{
  border-inline-start:4px solid #1f9d78!important;
}
#reportsList .report-portfolio-entry.approved-collapsed::before{
  display:none!important;
  content:none!important;
}

#reportsList .report-portfolio-entry .report-card-header{
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) max-content!important;
  grid-template-areas:"select identity status"!important;
  align-items:start!important;
  gap:var(--hendar-report-gap)!important;
  inline-size:100%!important;
  min-inline-size:0!important;
  block-size:auto!important;
  min-block-size:0!important;
  margin:0 0 11px!important;
  padding:0 0 11px!important;
  overflow:visible!important;
}

/* Defensive reset: no report-header item may float over another one. */
#reportsList .report-portfolio-entry .report-card-header>*{
  position:static!important;
  inset:auto!important;
  translate:none!important;
  transform:none!important;
  float:none!important;
}

#reportsList .report-portfolio-entry .report-select-control{
  grid-area:select!important;
  align-self:start!important;
  justify-self:stretch!important;
  display:grid!important;
  place-items:center!important;
  inline-size:40px!important;
  min-inline-size:40px!important;
  max-inline-size:40px!important;
  block-size:40px!important;
  min-block-size:40px!important;
  max-block-size:40px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}

#reportsList .report-portfolio-entry .report-select-control>input[type="checkbox"]{
  position:static!important;
  inset:auto!important;
  inline-size:18px!important;
  min-inline-size:18px!important;
  block-size:18px!important;
  min-block-size:18px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}

#reportsList .report-portfolio-entry .report-card-header>div{
  grid-area:identity!important;
  display:grid!important;
  align-content:start!important;
  gap:3px!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
}

#reportsList .report-portfolio-entry .report-card-header :is(.eyebrow,h3){
  display:block!important;
  inline-size:100%!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  margin:0!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:auto!important;
}

#reportsList .report-portfolio-entry .report-card-header .eyebrow{
  line-height:1.55!important;
}
#reportsList .report-portfolio-entry .report-card-header h3{
  line-height:1.35!important;
}

#reportsList .report-portfolio-entry .report-card-header>.status-pill{
  grid-area:status!important;
  align-self:start!important;
  justify-self:end!important;
  min-inline-size:0!important;
  max-inline-size:min(150px,36cqi)!important;
  block-size:auto!important;
  min-block-size:32px!important;
  margin:0!important;
  padding:6px 10px!important;
  overflow:visible!important;
  line-height:1.45!important;
  text-align:center!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

#reportsList .report-approved-identity,
#reportsList .report-portfolio-entry .report-stats{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  align-items:stretch!important;
  gap:7px!important;
  inline-size:100%!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  margin-block:9px!important;
  overflow:visible!important;
}

#reportsList .report-approved-identity>span,
#reportsList .report-portfolio-entry .report-stats>span{
  display:flex!important;
  align-items:center!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  block-size:auto!important;
  min-block-size:30px!important;
  padding:6px 8px!important;
  overflow:visible!important;
  line-height:1.55!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

#reportsList .report-portfolio-entry :is(.report-work-summary,.obstacles),
#reportsList .report-portfolio-entry .approved-report-details,
#reportsList .report-portfolio-entry .approved-report-details>summary,
#reportsList .report-portfolio-entry .approved-report-expanded{
  min-inline-size:0!important;
  max-inline-size:100%!important;
  block-size:auto!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

#reportsList .report-portfolio-entry .approved-report-details{
  overflow:hidden!important;
}

#reportsList .report-portfolio-entry .report-footer{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:9px!important;
  inline-size:100%!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  block-size:auto!important;
  overflow:visible!important;
}

#reportsList .report-portfolio-entry .report-footer>span{
  min-inline-size:0!important;
  max-inline-size:100%!important;
  line-height:1.55!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

#reportsList .report-portfolio-entry .report-footer .row-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:7px!important;
  inline-size:100%!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  overflow:visible!important;
}

#reportsList .report-portfolio-entry .report-footer :is(.row-action,.button,.review-state-note){
  position:static!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
  block-size:auto!important;
  min-block-size:36px!important;
  margin:0!important;
  padding:7px 8px!important;
  overflow:visible!important;
  line-height:1.4!important;
  text-overflow:clip!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

#reportsList .reports-type-head,
#reportsList .reports-project-panel-head{
  min-inline-size:0!important;
  max-inline-size:100%!important;
  block-size:auto!important;
}

#reportsList .reports-type-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:start!important;
  gap:9px!important;
}

#reportsList .reports-type-head>div:first-child{
  min-inline-size:0!important;
}

#reportsList .report-type-head-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  gap:6px!important;
  min-inline-size:0!important;
  max-inline-size:100%!important;
}

/* Container queries make the card respond to its real column width, not only
 * to the viewport. This covers a narrow report column on wide desktop screens. */
@container hendar-report-card (max-width:360px){
  #reportsList .report-portfolio-entry .report-card-header{
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-areas:
      "select identity"
      ". status"!important;
  }
  #reportsList .report-portfolio-entry .report-card-header>.status-pill{
    justify-self:start!important;
    max-inline-size:100%!important;
  }
  #reportsList .report-approved-identity,
  #reportsList .report-portfolio-entry .report-stats{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@container hendar-report-card (max-width:280px){
  #reportsList .report-portfolio-entry .report-card-header{
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:8px!important;
  }
  #reportsList .report-portfolio-entry .report-select-control{
    inline-size:36px!important;
    min-inline-size:36px!important;
    max-inline-size:36px!important;
    block-size:36px!important;
    min-block-size:36px!important;
    max-block-size:36px!important;
  }
  #reportsList .report-portfolio-entry .report-footer .row-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* Fallback for browsers that do not evaluate container queries. */
@media(max-width:560px){
  #reportsList .report-portfolio-entry .report-card-header{
    grid-template-columns:40px minmax(0,1fr)!important;
    grid-template-areas:
      "select identity"
      ". status"!important;
  }
  #reportsList .report-portfolio-entry .report-card-header>.status-pill{
    justify-self:start!important;
    max-inline-size:100%!important;
  }
  #reportsList .report-approved-identity,
  #reportsList .report-portfolio-entry .report-stats{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #reportsList .report-portfolio-entry .report-footer .row-actions{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #reportsList .reports-type-head{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #reportsList .report-type-head-actions{
    justify-content:flex-start!important;
  }
}

/* --------------------------------------------------------------------------
 * Shared intelligent horizontal section navigation.
 * The JS adds .hendar-edge-scroll-lane only to a real overflowing tab lane.
 * -------------------------------------------------------------------------- */

:where(
  #contextSubnav .context-subnav-items,
  #hrView .hr-center-tabs,
  .hr-suite-tabs,
  .barcode-center-tabs,
  .barcode-mode-tabs,
  .gantt-workspace-tabs,
  .uall-ae-pro-detail-nav,
  .approval-status-tabs,
  .workspace-tabs,
  .eqv89-nav,
  .eqv89-quick-filters,
  .eqv89-attendance-tabs,
  .eqv89-card-workflow-note
).hendar-edge-scroll-lane{
  min-inline-size:0!important;
  max-inline-size:100%!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  overscroll-behavior-inline:contain!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-x pan-y!important;
  scroll-behavior:smooth!important;
  scroll-padding-inline:calc(var(--hendar-edge-zone) + 8px)!important;
  scrollbar-width:thin!important;
  scrollbar-color:color-mix(in srgb,var(--af-muted,#718695) 28%,transparent) transparent!important;
}

:where(
  #contextSubnav .context-subnav-items,
  #hrView .hr-center-tabs,
  .hr-suite-tabs,
  .barcode-center-tabs,
  .barcode-mode-tabs,
  .gantt-workspace-tabs,
  .uall-ae-pro-detail-nav,
  .approval-status-tabs,
  .workspace-tabs,
  .eqv89-nav,
  .eqv89-quick-filters,
  .eqv89-attendance-tabs,
  .eqv89-card-workflow-note
).hendar-edge-scroll-lane::-webkit-scrollbar{
  height:4px!important;
}

:where(
  #contextSubnav .context-subnav-items,
  #hrView .hr-center-tabs,
  .hr-suite-tabs,
  .barcode-center-tabs,
  .barcode-mode-tabs,
  .gantt-workspace-tabs,
  .uall-ae-pro-detail-nav,
  .approval-status-tabs,
  .workspace-tabs,
  .eqv89-nav,
  .eqv89-quick-filters,
  .eqv89-attendance-tabs,
  .eqv89-card-workflow-note
).hendar-edge-scroll-lane::-webkit-scrollbar-track{
  background:transparent!important;
}

:where(
  #contextSubnav .context-subnav-items,
  #hrView .hr-center-tabs,
  .hr-suite-tabs,
  .barcode-center-tabs,
  .barcode-mode-tabs,
  .gantt-workspace-tabs,
  .uall-ae-pro-detail-nav,
  .approval-status-tabs,
  .workspace-tabs,
  .eqv89-nav,
  .eqv89-quick-filters,
  .eqv89-attendance-tabs,
  .eqv89-card-workflow-note
).hendar-edge-scroll-lane::-webkit-scrollbar-thumb{
  min-inline-size:36px!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--af-muted,#718695) 28%,transparent)!important;
}

.hendar-edge-scroll-lane.hendar-edge-dragging{
  cursor:grabbing!important;
  scroll-behavior:auto!important;
  scroll-snap-type:none!important;
  user-select:none!important;
}

.hendar-edge-scroll-cue{
  position:fixed!important;
  z-index:var(--hendar-edge-cue-z)!important;
  display:flex!important;
  align-items:center!important;
  width:var(--hendar-cue-width,var(--hendar-edge-zone))!important;
  height:var(--hendar-cue-height,44px)!important;
  top:var(--hendar-cue-top,0)!important;
  left:var(--hendar-cue-left,0)!important;
  padding:0 7px!important;
  border:0!important;
  pointer-events:none!important;
  opacity:1!important;
  transition:opacity .14s ease!important;
}

.hendar-edge-scroll-cue[hidden]{display:none!important}

.hendar-edge-scroll-cue.is-left{
  justify-content:flex-start!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--af-surface,#fff) 98%,transparent) 14%,color-mix(in srgb,var(--af-surface,#fff) 86%,transparent) 58%,transparent 100%)!important;
}

.hendar-edge-scroll-cue.is-right{
  justify-content:flex-end!important;
  background:linear-gradient(270deg,color-mix(in srgb,var(--af-surface,#fff) 98%,transparent) 14%,color-mix(in srgb,var(--af-surface,#fff) 86%,transparent) 58%,transparent 100%)!important;
}

.hendar-edge-scroll-cue>i{
  display:grid!important;
  place-items:center!important;
  inline-size:23px!important;
  block-size:23px!important;
  border:1px solid color-mix(in srgb,var(--tone,var(--af-navy,#153c62)) 24%,transparent)!important;
  border-radius:999px!important;
  background:color-mix(in srgb,var(--af-surface,#fff) 92%,transparent)!important;
  color:var(--tone,var(--af-navy,#153c62))!important;
  box-shadow:0 3px 10px rgba(15,42,67,.10)!important;
  font:900 13px/1 sans-serif!important;
  font-style:normal!important;
}

@media(pointer:coarse){
  :root{--hendar-edge-zone:46px}
  .hendar-edge-scroll-cue{padding-inline:4px!important;opacity:.82!important}
  .hendar-edge-scroll-cue>i{inline-size:20px!important;block-size:20px!important;font-size:11px!important}
}

@media(prefers-reduced-motion:reduce){
  .hendar-edge-scroll-lane,
  .hendar-edge-scroll-cue{
    scroll-behavior:auto!important;
    transition:none!important;
  }
}

@media print{
  .hendar-edge-scroll-cue{display:none!important}
}