dialog#cloud-dialog,
dialog#tasks-dialog {
  width: min(640px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid #d9e0e4;
  border-radius: 7px;
}

dialog#tasks-dialog {
  height: min(720px, calc(100vh - 40px));
}

.task-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #d9e0e4;
  margin: 0 -20px 12px;
  padding: 0 20px;
}

.task-tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #66737c;
}

.task-tab:hover { border-color: transparent; background: #f5f7f8; }
.task-tab.active { color: #1f2933; border-bottom-color: #17669a; }

.task-list {
  max-height: calc(100% - 120px);
  overflow-y: auto;
  border-top: 1px solid #e1e7ea;
  color: #66737c;
}

.task-row {
  display: grid;
  gap: 6px;
  padding: 13px 2px;
  border-bottom: 1px solid #e1e7ea;
  color: #1f2933;
}

.task-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.task-heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-destination,
.task-summary {
  color: #5c6972;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.status-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 3px;
  background: #e9eef1;
  color: #52616b;
  font-size: 11px;
  font-weight: 700;
}

.status-running { background: #e6f0f6; color: #15577f; }
.status-queued { background: #f5efdf; color: #775918; }
.status-completed { background: #e7f2eb; color: #286640; }
.status-failed { background: #f9e8e6; color: #92332d; }
.status-canceled { background: #eceff1; color: #5e6870; }
.status-unavailable { background: #f3ece4; color: #79542f; }

.task-row > button {
  justify-self: start;
  min-height: 31px;
  margin-top: 2px;
  padding: 4px 8px;
  font-size: 12px;
}

@media (max-width: 640px) {
  dialog#cloud-dialog,
  dialog#tasks-dialog {
    width: calc(100vw - 20px);
    padding: 16px;
  }
  dialog#tasks-dialog { height: calc(100vh - 20px); }
  .task-tabs { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .task-heading { align-items: flex-start; }
  .status-badge { margin-top: 1px; }
}