@layer dashboard-metrics, compact-timekeeping, card-geometry;
/* Card geometry is a shared screen contract. Important declarations live in
   a cascade layer so page-owned legacy !important heights/spans cannot stretch
   a card. Form panels, chart layouts, empty states and print stock are not cards.
   Long content remains reachable by scrolling inside the square. */
@layer card-geometry {
  @media screen {
body [data-card-grid],
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) {
    display: grid;
    /* Size tracks from available content width, including the open sidebar. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)) !important;
    justify-content: start;
    width: 100%;
    max-width: 112rem;
    grid-auto-rows: auto !important;
    grid-template-rows: none !important;
    align-items: start !important;
    gap: var(--ui-density-gap, .75rem) !important;
  }
body [data-preset-card],
body [data-card-grid] > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-task-card], [data-preset-card], .dashboard-catalog-card) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 22rem !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    align-self: start !important;
    grid-row: auto !important;
    grid-column: auto !important;
    flex: none !important;
    overflow: auto !important;
    overflow-wrap: anywhere;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  body [data-card-grid] > :is([data-card-grid-panel], [data-empty-state], .health-workspace-empty) {
    grid-column: 1 / -1 !important;
    aspect-ratio: auto !important;
  }
  /* Compact KPI and metric cards across all pages and modules */
  #app-main #app-content :is(
    [data-dashboard-kpi],
    [data-dashboard-card="kpi"],
    [data-compact-kpi],
    .ui-stat-card,
    [data-task-kpi-card],
    [data-dashboard-kpi-row] > *,
    .hrm-dashboard-metrics > *,
    [data-bp-metric-cards] > *,
    [data-integrations-summary] > *,
    #orgchart-summary > *,
    [data-attendance-metrics] > *
  ) {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    align-self: stretch !important;
    overflow: visible !important;
    border-top-width: 1px !important;
    border-top-style: solid !important;
    border-top-color: var(--ds-border, #e2e8f0) !important;
  }
  /* Readable content flows from the top; only the outer square scrolls. */
body [data-preset-card],
body [data-card-grid] > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .portal-summary, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-task-card], [data-preset-card], .dashboard-catalog-card) {
    font-size: .875rem;
    line-height: 1.45;
  }
  :is(body [data-preset-card],
body [data-card-grid] > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .portal-summary, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-task-card], [data-preset-card], .dashboard-catalog-card)) :is(.truncate, [class*="line-clamp-"]) {
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-wrap: anywhere;
  }
  :is(body [data-preset-card],
body [data-card-grid] > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .portal-summary, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-task-card], [data-preset-card], .dashboard-catalog-card)) :is(small, .text-xs, .text-\[10px\], .text-\[11px\]) {
    font-size: .75rem !important;
    line-height: 1.4 !important;
  }
  :is(body [data-preset-card],
body [data-card-grid] > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .portal-summary, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])):not([data-bp-metric-cards] *):not([data-integrations-summary] *):not(#orgchart-summary *):not([data-kpi-row] *):not(.health-workspace-record):not(.health-workspace-record *):not(.health-workspace-list *):not([data-menu-metric]):not(.health-dashboard-metric):not(.hrm-dashboard-salary):not(:has([data-dashboard-metric-value])):not(:has([data-metric-value])):not(:has([data-kpi])):not(:has([data-kpi-action])):not(:has([data-leave-kpi])):not(:has([data-payroll-kpi])),
#app-main #app-content :is([data-task-card], [data-preset-card], .dashboard-catalog-card)) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 1rem !important;
    min-height: 2.5rem;
    font-variant-numeric: tabular-nums;
  }
  :is(body [data-preset-card],
body [data-card-grid] > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])),
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .portal-summary, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])),
#app-main #app-content :is([data-task-card], [data-preset-card], .dashboard-catalog-card)).flex-col.justify-between,
  :is(body [data-preset-card],
body [data-card-grid] > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])),
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .portal-summary, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])),
#app-main #app-content :is([data-task-card], [data-preset-card], .dashboard-catalog-card)) .flex-col.justify-between {
    justify-content: flex-start !important;
    gap: .75rem;
  }
  :is(body [data-preset-card],
body [data-card-grid] > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])),
#app-main #app-content :is([data-card-grid], [data-dashboard-card-grid], .task-card-grid, .portal-summary, .grid:has(> .dashboard-catalog-card), #control-diagnostics > dl.grid, [data-menu-view-mode="cards"] [data-menu-dishes-list]) > :not(template):not(script):not(style):not([hidden]):not([data-empty-state]):not(.health-workspace-empty):not([data-card-grid-panel]):not([data-dashboard-kpi]):not([data-dashboard-card="kpi"]):not([data-compact-kpi]):not([data-dashboard-kpi-row] *):not(.hrm-dashboard-metrics *):not(.ui-stat-card):not([data-task-kpi-card]):not([data-kpi]):not([data-leave-kpi]):not([data-payroll-kpi]):not(.hrm-approval-card):not([data-approval-card]):not(article:has([data-kpi])):not(article:has([data-leave-kpi])):not(article:has([data-payroll-kpi])),
#app-main #app-content :is([data-task-card], [data-preset-card], .dashboard-catalog-card)) :is(.mt-auto, .my-auto) { margin-top: .75rem !important; }
  /* Anchor descriptions below metrics so they never obscure the label/value. */
  #app-main #app-content :is([data-dashboard-kpi], .ui-stat-card, [data-dashboard-card="kpi"]) { position: relative; }
  #app-main #app-content :is([data-dashboard-kpi], .ui-stat-card, [data-dashboard-card="kpi"]) [role="tooltip"]:not(.task-dashboard-kpi__tooltip) {
    position: absolute;
    width: auto !important;
    max-width: none !important;
    top: .5rem !important;
    bottom: auto !important;
    inset-inline: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #app-main #app-content [role="tooltip"].task-dashboard-kpi__tooltip {
    position: absolute;
    width: auto !important;
    max-width: none !important;
    top: calc(100% + .5rem) !important;
    bottom: auto !important;
    inset-inline: .75rem !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Expand menus in the card's own scroll flow so every action is reachable. */
  body [data-card-grid] [role="menu"],
  #app-main #app-content [data-task-card] [role="menu"] {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Sortable KPI wrappers have a second visible surface. Fill the existing
     square rather than calculating another content-driven height. */
  #app-main #app-content [data-task-kpi-card] > [data-dashboard-kpi] {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: auto !important;
    scrollbar-width: thin;
  }
  }
  /* Tables become cards only in the mobile presentation. */
  @media screen and (max-width: 768px) {
    #app-main #app-content table.mobile-list-cards:not(#permissions-detail-app table):not(.access-configurator table) tbody > tr:not(:has([colspan])) {
      box-sizing: border-box !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      aspect-ratio: 1 / 1 !important;
      overflow: auto !important;
      scrollbar-width: thin;
    }
  }
}

/* Working-time metrics use content height and wrap to the available width. */
@layer compact-timekeeping {
  @media screen {
    #app-main #app-content [data-leave-attendance] [data-attendance-metrics] {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      max-width: none !important;
      align-items: stretch !important;
    }
    #app-main #app-content [data-leave-attendance] [data-attendance-metrics] > article {
      max-width: none !important;
      aspect-ratio: auto !important;
      height: auto !important;
      min-height: 0 !important;
      padding: 12px 16px !important;
      align-self: stretch !important;
      overflow: visible !important;
    }
    @media (max-width: 1279px) {
      #app-main #app-content [data-leave-attendance] [data-attendance-metrics] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }
    @media (max-width: 639px) {
      #app-main #app-content [data-leave-attendance] [data-attendance-metrics] {
        grid-template-columns: minmax(0, 1fr) !important;
      }
    }
    /* Nine metrics: one row when wide, a full 3x3 block otherwise, never a lone orphan card. */
    #app-main #app-content [data-zup-employee-card],
    #app-main #app-content [data-zup-employee-card] [data-profile-timekeeping] {container-type:inline-size}
    #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] {display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.75rem!important;align-items:stretch!important}
    @media (min-width: 420px) {
      #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] {grid-template-columns:repeat(3,minmax(0,1fr))!important}
    }
    @media (min-width: 1180px) {
      #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] {grid-template-columns:repeat(9,minmax(0,1fr))!important}
    }
    @container (min-width: 420px) {
      #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] {grid-template-columns:repeat(3,minmax(0,1fr))!important}
    }
    @container (min-width: 1180px) {
      #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] {grid-template-columns:repeat(9,minmax(0,1fr))!important}
    }
    /* Equal card height: label, value and caption share fixed slots. */
    #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] > .ui-stat-card {
      width:auto!important;max-width:none!important;
      aspect-ratio:auto!important;height:auto!important;min-height:0!important;padding:12px!important;overflow:visible!important;
      display:flex!important;flex-direction:column!important;align-self:stretch!important;
    }
    #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] > .ui-stat-card > div {flex:1 1 auto;align-items:stretch}
    #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] > .ui-stat-card > div > div {display:flex;flex-direction:column;width:100%}
    #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] [data-dashboard-metric-label] {min-height:2.6em;line-height:1.3}
    #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] [data-dashboard-metric-value] {font-size:20px;line-height:1.3;min-height:1.3em;overflow-wrap:anywhere}
    #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] [data-metric-text] [data-dashboard-metric-value] {font-size:14px!important;font-weight:600;line-height:1.3}
    #app-main #app-content [data-zup-employee-card] [data-timekeeping-summary] [data-dashboard-metric-caption] {margin-top:auto;padding-top:6px;min-height:calc(1.5em + 6px)}
  }
}

/* Dashboard metrics are summaries, not catalogue tiles. Keep their height
   content-driven even when the surrounding sortable grid uses square cards. */
@layer dashboard-metrics {
  @media screen {
    /* KPI metric summary rows — content-driven height, never square */
    #app-main #app-content :is(
      .hrm-approvals-metrics,
      .hrm-dashboard-metrics,
      .work-schedules-metrics,
      [data-dashboard-kpi-row],
      [data-kpi-row],
      [data-attendance-metrics],
      .dashboard-kpi-grid,
      #kpi-cards-container,
      [data-sortable-cards]:has(> [data-task-kpi-card]),
      .grid:has(> [data-dashboard-kpi]),
      .grid:has(> [data-task-kpi-card]),
      .grid:has(> [data-dashboard-card="kpi"]),
      .grid:has(> [data-kpi]),
      .grid:has(> [data-leave-kpi]),
      .grid:has(> [data-payroll-kpi]),
      .grid:has(> .ui-stat-card),
      :is([data-dashboard-design], [data-dashboard-layout="canonical"]) :is([data-dashboard-kpi-row], [data-dashboard-card-grid]:has(> [data-dashboard-kpi], > [data-dashboard-card="kpi"]), [data-dashboard-grid][data-card-grid]:has(> [data-dashboard-kpi], > [data-dashboard-card="kpi"]), .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards]:has(> [data-task-kpi-card]))
    ) {
      grid-template-columns: minmax(0, 1fr) !important;
      @media (min-width: 480px) and (max-width: 959px) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
      /* Desktop summaries use one equal-width track per visible metric.
         Zero minimums let cards shrink with the content area and sidebar. */
      @media (min-width: 960px) {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-flow: column !important;
        grid-auto-columns: minmax(0, 1fr) !important;
        > :not(script):not(style):not(template) {
          min-width: 0 !important;
          max-width: 100%;
          overflow-wrap: anywhere;
          grid-column: auto !important;
        }
      }
      max-width: none !important;
      gap: .75rem !important;
      align-items: stretch !important;
    }
    @media (max-width: 959px) {
      #app-main #app-content :is(
        .hrm-approvals-metrics,
        .hrm-dashboard-metrics,
        .work-schedules-metrics,
        [data-dashboard-kpi-row],
        [data-kpi-row],
        [data-attendance-metrics],
        .dashboard-kpi-grid,
        #kpi-cards-container
      ) {
        grid-template-columns: repeat(2, minmax(min(100%, 10rem), 1fr)) !important;
      }
    }
    @media (max-width: 479px) {
      #app-main #app-content :is(
        .hrm-approvals-metrics,
        .hrm-dashboard-metrics,
        .work-schedules-metrics,
        [data-dashboard-kpi-row],
        [data-kpi-row],
        [data-attendance-metrics],
        .dashboard-kpi-grid,
        #kpi-cards-container
      ) {
        grid-template-columns: minmax(0, 1fr) !important;
      }
    }
    #app-main #app-content :is([data-dashboard-design], [data-dashboard-layout="canonical"]) :is([data-dashboard-kpi-row], [data-dashboard-card-grid]:has(> [data-dashboard-kpi], > [data-dashboard-card="kpi"]), [data-dashboard-grid][data-card-grid]:has(> [data-dashboard-kpi], > [data-dashboard-card="kpi"]), .hrm-dashboard-metrics, .dashboard-kpi-grid, #kpi-cards-container, [data-sortable-cards]:has(> [data-task-kpi-card])) {
      /* Track count is owned by the responsive KPI row contract above. */
      max-width: none !important;
      gap: .625rem !important;
      align-items: stretch !important;
    }
    /* All KPI metric cards fit content height without empty whitespace */
    #app-main #app-content :is(
      [data-dashboard-kpi],
      [data-compact-kpi],
      [data-task-kpi-card],
      [data-dashboard-card="kpi"],
      [data-kpi-card],
      [data-metric-card],
      [data-stat-card],
      [data-compact-card],
      .ui-stat-card,
      [data-ui-component="stat-card"],
      .iiko-metric-card,
      .metric-card,
      .stat-card,
      [data-menu-metric],
      .health-dashboard-metric,
      .hrm-dashboard-salary,
      article:has([data-kpi]),
      article:has([data-leave-kpi]),
      article:has([data-payroll-kpi]),
      [data-dashboard-kpi-row] > *,
      [data-dashboard-kpi-row] > article,
      [data-dashboard-kpi-row] > a,
      [data-dashboard-kpi-row] > div,
      [data-dashboard-kpi-row] > section,
      [data-kpi-row] > *,
      [data-kpi-row] > article,
      [data-kpi-row] > a,
      [data-kpi-row] > div,
      [data-kpi-row] > section,
      .hrm-approvals-metrics > *,
      .hrm-dashboard-metrics > *,
      .work-schedules-metrics > *,
      [data-attendance-metrics] > *,
      [data-bp-metric-cards] > *,
      [data-integrations-summary] > *,
      #orgchart-summary > *,
      [data-expiry-metrics] > *,
      [data-inventory-metrics] > *,
      [data-telegram-metrics] > *,
      [data-access-metrics] > *,
      [data-metric-container] > *,
      .dashboard-kpi-grid > *,
      #kpi-cards-container > *,
      .health-dashboard-metrics > *,
      .health-workspace-record,
      [data-time-policy-list] > *,
      .portal-summary > *,
      :is([data-dashboard-design], [data-dashboard-layout="canonical"]) :is([data-task-kpi-card], [data-dashboard-kpi], [data-dashboard-card="kpi"])
    ) {
      width: 100% !important;
      max-width: none !important;
      aspect-ratio: auto !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      align-self: stretch !important;
      border-top-width: 1px !important;
      border-top-style: solid !important;
      border-top-color: var(--ds-border, #e2e8f0) !important;
    }
    #app-main #app-content :is([data-compact-kpi], [data-dashboard-kpi]) :is(.truncate, [data-dashboard-metric-label], [data-dashboard-metric-caption]) {
      white-space: normal !important;
      overflow: visible !important;
      text-overflow: clip !important;
      overflow-wrap: break-word;
    }
    #app-main #app-content .dashboard-kpi-header {
      display: flex !important;
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
      gap: .5rem !important;
      min-width: 0 !important;
      width: 100% !important;
    }
    #app-main #app-content .dashboard-kpi-header > .min-w-0 {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      width: auto !important;
    }
    #app-main #app-content .dashboard-kpi-controls {
      flex: 0 0 auto !important;
      display: flex !important;
      justify-content: flex-end !important;
      align-items: center !important;
      gap: .375rem !important;
      margin-block-start: 0 !important;
      width: auto !important;
      max-width: max-content !important;
      min-width: 0 !important;
    }
    body :is(
      .hrm-approvals-metrics,
      .hrm-dashboard-metrics,
      .work-schedules-metrics,
      [data-dashboard-kpi-row],
      [data-kpi-row]
    ) > :is(article, a, div, section, [data-compact-kpi], [data-dashboard-kpi]),
    #app-main #app-content :is(
      .hrm-approvals-metrics,
      .hrm-dashboard-metrics,
      .work-schedules-metrics,
      [data-dashboard-kpi-row],
      [data-kpi-row]
    ) > :is(article, a, div, section, [data-compact-kpi], [data-dashboard-kpi]) {
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      aspect-ratio: auto !important;
      overflow: visible !important;
    }
    /* Analytical grids use readable chart panels; catalogue grids stay square. */
    #app-main #app-content :is([data-dashboard-design], [data-dashboard-layout="canonical"]) [data-dashboard-grid][data-card-grid]:not(:has(> [data-dashboard-kpi], > [data-dashboard-card="kpi"])) {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)) !important;
      max-width: none !important;
      align-items: stretch !important;
      gap: .75rem !important;
    }
    #app-main #app-content :is([data-dashboard-design], [data-dashboard-layout="canonical"]) [data-dashboard-grid][data-card-grid] > :not(template):not(script):not(style) {
      aspect-ratio: auto !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      align-self: stretch !important;
      border-top-width: 1px !important;
      border-top-style: solid !important;
      border-top-color: var(--ds-border, #e2e8f0) !important;
    }
    #app-main #app-content [data-dashboard-kpi-row] > [data-task-kpi-card] {
      display: grid !important;
    }
  }
}