/* Styles for src/pages/task-queues.js and nothing else. A TreeView beside a DataGridView. */

.tq { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-2); align-items: start; }

.tq__tree {
  background: var(--c-window);
  border: 1px solid var(--c-input-border);
  padding: 2px;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.tq__area { padding: 2px 4px; white-space: nowrap; }
.tq__toggle { display: inline-block; width: 14px; font-size: 9px; color: var(--c-text-gray); }

.tq__node {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: none;
  min-height: 0;
  padding: 1px 4px 1px 22px;
  line-height: 18px;
  color: var(--c-text);
  white-space: nowrap;
}
.tq__node:hover { background: var(--c-row-hover); border-color: transparent; }
.tq__node--mine { font-weight: 600; }
.tq__node--selected, .tq__node--selected:hover { background: var(--c-highlight); color: var(--c-highlight-text); }

.tq__foot { margin: auto 0 0; padding: var(--s-2) 4px 2px; font-size: var(--t-xs); color: var(--c-text-gray); }

.tq__todo { padding: 0 0 var(--s-1); }
.tq__grid { min-height: 300px; }
.tq__hint { margin: var(--s-1) 0 0; color: var(--c-text-gray); font-size: var(--t-xs); }

@media (max-width: 900px) {
  .tq { grid-template-columns: 1fr; }
  .tq__tree { min-height: 0; }
}