/* Stage 4 Organisation B1 — Aufgaben & Termine.
   Responsive containment for the operational work table.
   Behavior and DOM remain unchanged. */

/* Field values use the canonical input weight, independently of bold labels. */
/* Keep the remaining task dialogs usable in short windows and at browser zoom. */
.tool-organisation .dialog:has(#taskEditor) {
  max-height: calc(100dvh - var(--zg-space-8));
  overflow: auto;
}

.tool-organisation #taskEditor {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: calc(100dvh - var(--zg-space-8));
}

.tool-organisation #taskEditor > :is(.task-popup-head, .task-popup-tabs, .task-popup-actions) {
  flex-shrink: 0;
}

.tool-organisation #taskEditor > .task-popup-panels {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.tool-organisation #taskEditor > .task-popup-actions {
  flex-wrap: wrap;
  margin-top: 0;
}

.tool-organisation .work-project-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--zg-space-3);
  margin-block-end: var(--zg-space-4);
}

.tool-organisation .work-project-filter .zg-field {
  flex: 1;
  min-width: 0;
}

.tool-organisation .work-project-filter .zg-select {
  width: 100%;
}

.tool-organisation .work-project-filter.is-project-active {
  border-inline-start: var(--zg-space-1) solid var(--project-color);
}

.tool-organisation .work-project-context {
  display: flex;
  align-items: center;
  gap: var(--zg-space-3);
  flex: 2 1 240px;
  min-width: 0;
}

.tool-organisation .work-project-context__icon {
  color: var(--project-color);
  font-size: var(--zg-font-display);
  flex-shrink: 0;
}

.tool-organisation .work-project-context > div {
  display: grid;
  gap: var(--zg-space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

.tool-organisation .work-project-context strong {
  color: var(--zg-text-primary);
  font: var(--zg-weight-h2) var(--zg-font-h2)/var(--zg-line-h2) var(--zg-font-family);
}

.tool-organisation .work-project-filter.is-project-active .zg-field {
  flex: 1 1 220px;
}

@media (max-width: 680px) {
  .tool-organisation .work-project-filter .work-project-context,
  .tool-organisation .work-project-filter .zg-field,
  .tool-organisation .work-project-filter.is-project-active .zg-field {
    flex-basis: 100%;
  }
}

.tool-organisation .task-checklist-list .zg-control {
  display: inline-flex;
  align-items: center;
  gap: var(--zg-space-2);
  color: var(--zg-text-secondary);
  font: var(--zg-weight-label) var(--zg-font-label)/var(--zg-line-label) var(--zg-font-family);
}

/* Undo legacy text-field geometry so checklist controls use shared tokens. */
.tool-organisation .task-checklist-list .zg-checkbox {
  width: var(--zg-checkbox-size);
  height: var(--zg-checkbox-size);
  min-height: var(--zg-checkbox-size);
  padding: 0;
  border-radius: var(--zg-checkbox-radius);
  color: var(--zg-text-on-accent);
}

.tool-organisation :is(.task-manager, .task-editor) :is(input, select, textarea),
.tool-organisation :is(.task-manager, .task-editor) .multi-dropdown summary,
.tool-organisation :is(.task-manager, .task-editor) .multi-options label {
  font-weight: var(--zg-weight-body);
}

.tool-organisation #view,
.tool-organisation .organisation-page-tabs {
  min-width: 0;
  max-width: 100%;
}

/* The Aufgaben/Termine rows intentionally keep a wide desktop grid and are
   horizontally scrollable inside .work-table. Prevent that internal grid from
   contributing to document-level horizontal overflow. */
.tool-organisation #view {
  overflow-x: clip;
}

.tool-organisation .organisation-page-tabs {
  inline-size: auto;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding-block-start: var(--zg-space-2);
  height: calc(var(--zg-tab-height) + var(--zg-space-2));
}

body.tool-organisation:has(.organisation-page-tabs) .main-content {
  padding-top: calc(var(--zg-space-8) + var(--zg-tab-height) + var(--zg-space-2));
}

@media (max-width: 760px) {
  body.tool-organisation:has(.organisation-page-tabs) .main-content {
    padding-top: calc(var(--zg-space-4) + var(--zg-tab-height) + var(--zg-space-2));
  }
}

.tool-organisation #view .work-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
}

.tool-organisation #view > .toolbar {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* At tablet widths the available workspace beside the sidebar becomes too narrow
   for search + area + status controls in one row. Use the same robust stacked
   pattern as mobile, but keep only the status segment horizontally scrollable. */
@media (max-width: 900px) {
  .tool-organisation #view > .toolbar {
    display: flex !important;
    align-items: stretch !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important;
  }

  .tool-organisation #view > .toolbar > input,
  .tool-organisation #view > .toolbar > select {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
    flex: none;
  }

  .tool-organisation #view > .toolbar > .tabs {
    display: flex;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    justify-content: flex-start;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  .tool-organisation #view > .toolbar > .tabs > .tab {
    flex: 0 0 auto;
  }

  .tool-organisation .organisation-page-tabs,
  .tool-organisation #view .work-table {
    min-width: 0;
    max-width: 100%;
  }
}