/* Data Metrics: a leaner Huly tracker. nginx adds this file and tracker.js to every page.
   Tracker-only rules are scoped with html[data-hc-app="tracker"] (set by tracker.js from the URL).
   Huly's own nodes are only hidden or restyled here, never moved: Svelte keeps references to them.
   This sheet loads before Huly's styles, so a rule that overrides Huly needs more specificity or !important. */

/* ---------- navigator: just the projects, each opens its issues ---------- */

/* Issues / Components / Milestones / Templates under every project (the project row itself opens the issues) */
#navGroup-tree-projects .hulyNavGroup-container.nested > .hulyNavGroup-content {
  display: none !important;
}
/* projects look like plain navigator items, not like group headings */
#navGroup-tree-projects .hulyNavGroup-container.nested > .hulyNavGroup-header .hulyNavGroup-header__label {
  background: none !important;
  text-transform: none !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--theme-content-color);
}
#navGroup-tree-projects .hulyNavGroup-container.nested > .hulyNavGroup-header.hc-active {
  background-color: var(--theme-navpanel-selected, rgba(128, 128, 128, 0.16));
}
#navGroup-tree-projects .hulyNavGroup-container.nested > .hulyNavGroup-header.hc-active .hulyNavGroup-header__label {
  color: var(--theme-caption-color);
  font-weight: 500 !important;
}

/* "All projects" and "Labels", with the divider above them */
a[href$="/tracker/all-projects"],
a[href$="/tracker/labels"],
.antiNav-divider:has(+ a[href$="/tracker/all-projects"]) {
  display: none !important;
}

/* ---------- the calendar side panel is not used in the tracker ---------- */
html[data-hc-app="tracker"] #sidebar {
  display: none !important;
}

/* ---------- view header: one row (title · search · filter · tabs · ⋯), project tabs below ---------- */
html[data-hc-app="tracker"] .hulyHeader-container.doubleRow {
  position: relative;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem;
}
html[data-hc-app="tracker"] .hulyHeader-container.doubleRow > .hulyHeader-row {
  display: contents !important;
}
html[data-hc-app="tracker"] .hulyHeader-container.doubleRow .hulyHeader-titleGroup {
  order: 1;
  flex: 0 1 auto;
  min-width: 0;
}
html[data-hc-app="tracker"] .hulyHeader-container.doubleRow .hulyHeader-buttonsGroup.search {
  order: 2;
}
html[data-hc-app="tracker"] .hulyHeader-container.doubleRow .hulyHeader-buttonsGroup.extra {
  order: 3;
  margin-left: auto;
}
html[data-hc-app="tracker"] .hulyHeader-container.doubleRow .hulyHeader-buttonsGroup.actions {
  order: 4;
}
/* list / board / view options / customize: reachable from the ⋯ menu. Kept in the layout (invisible, under
   the ⋯ button) so the popups they open are anchored there. */
html[data-hc-app="tracker"] .hulyHeader-container.doubleRow .hulyHeader-buttonsGroup.before {
  position: absolute !important;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  margin: 0 !important;
  opacity: 0;
  pointer-events: none;
}

/* our popup menu: ⋯ on the board, the choice of project tabs */
.hc-menu-popup {
  position: fixed;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.25rem;
  background: var(--theme-popup-color);
  border: 1px solid var(--theme-popup-divider);
  border-radius: 0.5rem;
  box-shadow: var(--theme-popup-shadow);
}
.hc-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: 0.375rem;
  background: none;
  font: inherit;
  font-size: 0.875rem;
  text-align: left;
  color: var(--theme-content-color);
  cursor: pointer;
}
.hc-menu-item:hover {
  background: var(--theme-popup-hover);
}
.hc-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  color: var(--theme-dark-color);
}
.hc-menu-icon svg {
  width: 1rem;
  height: 1rem;
}
.hc-menu-text {
  flex: 1 1 auto;
  white-space: nowrap;
}
.hc-menu-check {
  flex-shrink: 0;
  width: 1rem;
  text-align: right;
  color: var(--theme-caption-color);
}

/* project tabs (My issues, All issues): the same tabs as Huly's above them (cloned, same size and padding), on the
   right with the same right edge; the settings button sits right under the header's ⋯ (same 1rem side padding) */
.hc-projects {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
  min-width: 0;
  padding: 0 1rem 0.5rem;
  border-bottom: 1px solid var(--theme-divider-color, rgba(0, 0, 0, 0.06));
}
/* the header's own bottom line moves under the tabs: header and tabs read as one block */
html[data-hc-app="tracker"] .hulyHeader-container.doubleRow:has(+ .hc-projects) {
  border-bottom-color: transparent !important;
}
.hc-projects > .hc-tabs {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
}
/* the header keeps 24px between its tabs and ⋯ (group paddings + gap): same here, so both rows of tabs end at one line */
.hc-projects > button {
  flex-shrink: 0;
  margin-left: 1rem;
}
.hc-projects .switcher-container {
  flex-wrap: nowrap !important;
}
/* when the tabs are the only filter, Huly's filter row would just repeat them */
.hc-projects.hc-only + .filterbar-container {
  display: none !important;
}

/* ---------- no components, milestones or templates on issues ---------- */

/* board cards: keep the priority button, drop the component and milestone buttons */
.tracker-card .card-labels:not(.labels) > div {
  display: none !important;
}
/* list rows */
.antiList__row #milestone,
.antiList__row div:has(> div > #milestone) {
  display: none !important;
}
/* issue page, right column: the Component and Milestone rows (label + value) and their divider */
.popupPanel-body__aside-grid > div:has(#milestone),
.popupPanel-body__aside-grid > span:has(+ div #milestone),
.popupPanel-body__aside-grid > div:has(+ span + div #milestone),
.popupPanel-body__aside-grid > span:has(+ div + span + div #milestone),
.popupPanel-body__aside-grid > .divider:has(+ span + div + span + div #milestone) {
  display: none !important;
}
/* new issue: component, milestone and the template selector next to the project */
#milestone-editor,
.antiCard-pool > button:has(span.cursor-default.noUnderline),
.antiCard-header__title-wrap > [id="space.selector"] + div.min-w-0 {
  display: none !important;
}

/* ---------- no time tracking: estimation, spent and remaining time ---------- */

/* list rows: the whole column with its divider */
.antiList__row > div:has(.estimation-container),
.antiList__row > span.root:has(+ div .estimation-container) {
  display: none !important;
}
/* board cards */
.tracker-card .estimation-container {
  display: none !important;
}
/* issue page, right column: Estimation, Spent time and Remaining time (label + value) */
.popupPanel-body__aside-grid > div:has(#ReportedTimeEditor),
.popupPanel-body__aside-grid > span:has(+ div #ReportedTimeEditor),
.popupPanel-body__aside-grid > div:has(+ span + div #ReportedTimeEditor),
.popupPanel-body__aside-grid > span:has(+ div + span + div #ReportedTimeEditor),
.popupPanel-body__aside-grid > div:has(#ReportedTimeEditor) + span,
.popupPanel-body__aside-grid > div:has(#ReportedTimeEditor) + span + div {
  display: none !important;
}
/* new issue */
#estimation-editor {
  display: none !important;
}

/* ---------- list rows: labels side by side, comments in a column on the right ---------- */

/* Huly squeezes the labels into a narrow strip where they overlap; give them their natural width instead */
html[data-hc-app="tracker"] .antiList__row .compression-bar {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}
html[data-hc-app="tracker"] .antiList__row .compression-bar > .label-box {
  flex-shrink: 0 !important;
}
/* fixed columns on the right of every row, so all rows line up: status change · comment count · assignee.
   Rows without a change or without comments keep the place empty (tracker.js adds the empty cells). */
html[data-hc-app="tracker"] .antiList__row > .hc-st-cell {
  order: 3;
  display: flex;
  align-items: center;
  flex: 0 0 15rem;
  min-width: 0;
}
html[data-hc-app="tracker"] .antiList__row > button.antiButton,
html[data-hc-app="tracker"] .antiList__row > .hc-cm-cell {
  order: 4;
  flex: 0 0 3rem;
  min-width: 3rem;
  justify-content: flex-end !important;
}
html[data-hc-app="tracker"] .antiList__row > div:has(.employee-presenter) {
  order: 5;
}

/* ---------- status change of the last 24 h instead of the modified date ---------- */

/* list rows: the date column goes (with its divider); the change has its own column (above) */
html[data-hc-app="tracker"] .antiList__row > div:has(> .modificationDateLabel),
html[data-hc-app="tracker"] .antiList__row > span.root:has(+ div > .modificationDateLabel) {
  display: none !important;
}
.hc-st {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  padding: 0.125rem 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid var(--theme-divider-color, rgba(128, 128, 128, 0.3));
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
  color: var(--theme-dark-color);
}
.hc-st-cell .hc-st {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc-st__to {
  font-weight: 500;
  color: var(--theme-caption-color);
}
.hc-st__ago {
  margin-left: 0.125rem;
  color: var(--theme-darker-color, var(--theme-dark-color));
}

/* board cards: the change on the left of the footer, the comment count on the right, both inside the card */
.tracker-card .card-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem;
}
.tracker-card .card-footer > div:first-child {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden;
}
.tracker-card .card-footer > div:last-child {
  flex: 0 0 auto !important;
  margin-left: auto !important;
}
.tracker-card .hc-st {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}