/* Desktop-only UI corrections for management dialogs and panel tabs. */

/*
  The right-panel buttons use an explicit grid instead of competing flex values.
  This prevents one label-width correction from shrinking the other controls.
*/
body:has(.page.desktopMode) .desktopPanelModeTabs {
  display: grid !important;
  grid-template-columns:
    minmax(76px, 0.9fr)
    minmax(112px, 1.28fr)
    minmax(78px, 0.9fr)
    minmax(98px, 1.08fr)
    minmax(58px, 0.68fr) !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
}

body:has(.page.desktopMode)
  .desktopPanelModeTabs
  .desktopHeaderModeTab {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-inline: 8px !important;
  flex: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

body:has(.page.desktopMode)
  .desktopPanelModeTabs
  .desktopActivityModeTab {
  grid-column: 1 !important;
}

body:has(.page.desktopMode)
  .desktopPanelModeTabs
  .desktopAssignmentsModeTab {
  grid-column: 2 !important;
}

body:has(.page.desktopMode)
  .desktopPanelModeTabs
  .desktopAgendaModeTab {
  grid-column: 3 !important;
}

body:has(.page.desktopMode)
  .desktopPanelModeTabs
  .desktopStatisticsModeTab {
  grid-column: 4 !important;
}

body:has(.page.desktopMode)
  .desktopPanelModeTabs
  .desktopHelpModeTab {
  grid-column: 5 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 7px !important;
  flex: none !important;
}

/* Keep management and legend dialogs above desktop calendar/header layers. */
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Manage platforms"],
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Manage Cleaners"],
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Manage Users"],
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Manage Vendors"],
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Legend"] {
  z-index: 20020 !important;
}

/*
  Desktop management dialogs are centered windows, not mobile full-height sheets.
  Explicit top/max-height avoids the Users/Cleaners panels drifting below the viewport.
*/
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Manage Cleaners"],
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Manage Users"],
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Manage Vendors"] {
  top: 18px !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  width: min(740px, calc(100vw - 36px)) !important;
  max-width: 740px !important;
  height: auto !important;
  max-height: calc(100dvh - 36px) !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Manage Platforms already owns a suitable 740px width; only normalize its desktop height. */
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Manage platforms"] {
  top: 18px !important;
  bottom: auto !important;
  max-height: calc(100dvh - 36px) !important;
}

/* Legend is a compact popup and should remain visually centered above the header. */
body:has(.page.desktopMode)
  [role="dialog"][aria-modal="true"][aria-label="Legend"] {
  z-index: 20030 !important;
}

/* Overlay used by the desktop Activity tab enhancer. */
body:has(.page.desktopMode) .desktopActivityPanelOverlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #fffdf7;
}

body:has(.page.desktopMode) .desktopActivityPanelOverlay > * {
  width: 100%;
  height: 100%;
  min-height: 0;
}